How do I display 4 employees with no slider instead of 3?

How do I display 4 employees with no slider instead of 3? I have added the employee widget at the bottom of my homepage but it just doesn’t look right having to move over to select the 4th person.

Website: https://golftis.com/

Hello there,

Try one of the following solutions:

Regards,
Kharis

Hi, Link #2 worked but it put the 4th employee underneath as a new row (see https://golftis.com). How can I get all 4 inline on the same row? Also, it did not make the same change in the “Tournament Team” page.

The instructions I followed were to add this to simple CSS:

.roll-team .owl-wrapper{
max-width: 100% !important;
transition: none !important;
transform: none !important;
}

.roll-team .owl-controls{
display: none !important;
}

And this to TC Custom Javascript:

/**

  • Javascript-Equal-Height-Responsive-Rows
  • https://github.com/Sam152/Javascript-Equal-Height-Responsive-Rows
    */
    (function($){‘use strict’;$.fn.equalHeight=function(){var heights=[];$.each(this,function(i,element){var $element=$(element);var elementHeight;var includePadding=($element.css(‘box-sizing’)===‘border-box’)||($element.css(’-moz-box-sizing’)===‘border-box’);if(includePadding){elementHeight=$element.innerHeight();}else{elementHeight=$element.height();}
    heights.push(elementHeight);});this.css(‘height’,Math.max.apply(window,heights)+‘px’);return this;};$.fn.equalHeightGrid=function(columns){var $tiles=this.filter(’:visible’);$tiles.css(‘height’,‘auto’);for(var i=0;i<$tiles.length;i++){if(i%columns===0){var row=$($tiles[i]);for(var n=1;n<columns;n++){row=row.add($tiles[i+n]);}
    row.equalHeight();}}
    return this;};$.fn.detectGridColumns=function(){var offset=0,cols=0,$tiles=this.filter(’:visible’);$tiles.each(function(i,elem){var elemOffset=$(elem).offset().top;if(offset===0||elemOffset===offset){cols++;offset=elemOffset;}else{return false;}});return cols;};var grids_event_uid=0;$.fn.responsiveEqualHeightGrid=function(){var this=this;var event_namespace=’.grids’+grids_event_uid;_this.data(‘grids-event-namespace’,event_namespace);function syncHeights(){var cols=_this.detectGridColumns();_this.equalHeightGrid(cols);}
    $(window).bind(‘resize’+event_namespace+’ load’+event_namespace,syncHeights);syncHeights();grids_event_uid++;return this;};$.fn.responsiveEqualHeightGridDestroy=function(){var _this=this;_this.css(‘height’,‘auto’);$(window).unbind(_this.data(‘grids-event-namespace’));return this;};})(window.jQuery);

;(function($) {
‘use strict’
$(window).on(‘load resize’, function() {
if( $(’.roll-team’).length ){
$(’.roll-team .owl-item’).responsiveEqualHeightGrid();
}
});
})(jQuery);

Hello there,

Add the following custom CSS code:


@media only screen and (min-width:971px) {
  
  .roll-team .owl-item {
    width: 25% !important; 
  }  
  
}

Regards,
Kharis

It worked! you’re fantastic. Where can I go to rate Sydney theme and give you guys the credit you deserve?

You’re welcome!

You can rate and leave your review here.

Regards,
Kharis

Thanks, 5 star review was posted.

Thank you very much! We really appreciate it.

Regards,
Kharis

Is it possible to achieve the layout with 4 employees on a row but still maintaining the slider to show more employees after those.

Hello there,

Yes, it is possible to do. I’ve written the answer for this on this thread. I hope you can find it helpful.

Regards,
Kharis