Employee widget slides issue on desktop

Hi Team

I am facing an issue while using the Employee Slider widget on my website, www.youruniquegift.com. If you look at the Interests section at the bottom on your desktop, there are 6 items which are arranged in 2 rows of 3, whereas, as per the ‘Team’ section of the Sydney theme demo, it should actually be displayed 3 at a time, with the next 3 showing up in the next page. It still has a pagination button at the bottom but the next page is blank.

This issue is coming up only on desktop but not on mobile. I have been struggling with it for the past few hours with no solution, so would really appreciate your help.

Thanks in advance!

Divya

Hi Divya,

I’ve checked your site and seems like your these custom css code below is causing those issue:

@media only screen and (min-width: 971px)
.roll-team .owl-wrapper {
    text-align: center;
    width: 100% !important;
}

@media only screen and (min-width: 971px)
.roll-team .owl-wrapper {
    text-align: center;
    width: 100% !important;
}

@media only screen and (min-width: 971px)
.roll-team.owl-carousel .owl-item {
    float: left !important;
    display: inline-block;
}
@media only screen and (min-width: 971px)
.roll-team.owl-carousel .owl-item {
    float: none;
    display: inline-block;
}

Hi Awan,

Thank you so much for a quick reply!

Actually I didn’t really do anything to the CSS code at all, the only customization I did for this widget code was to remove the Popup overlay.

All the 3 section on the home page are the Employee widgets and they are rendering properly on the mobile version however the problem is only on the desktop version for the ‘Interests’ section which has more than 3 items. Could you please help me with how to sort out this problem so it starts looking like the Demo…

TIA!
Divya

Hi,

“the only customization I did for this widget code was to remove the Popup overlay”
> You are using custom css code in above to remove the overlay, is correct? In fact, you custom css code was causing your current problem.

Can you remove those custom css code? after that, I will give you another css code to remove the overlay.

Hi Awan,

I have replaced the code back to the original without any modifications. Also just wanted to inform you that this problem existed even before we made the change to remove the pop-up overlay.

Anyway hoping that the code you shall now give will take care of the slider issue as well as remove the popup overlay segment :slight_smile:

TIA!
Divya

Its strange because I noticed the custom css code in above still exist in your site.
Can you try to deactivate not required plugin from your site? let see if its not caused by another plugins.

Hi Awan,

I have now deactivated all the plugins from my site except 2:-

  1. Toolset Types which is recommended by Sydney and obviously needed
  2. Page Builder by Site Origin again needed for obvious reasons

However as you can see, the problem still persists :(. I will keep all the other plugins deactivated till I hear from you next. Hoping you can find a resolution soon.

TIA!
Divya

Can you create a temporary account to your wordpress admin and send it to awan.rimbawan101 at gmail? let me check what happened in your site.

Hi Awan,

Done!

Divya

Hi,

I thought there is a bug in Sydney theme which is a parent theme of the Bistro theme. The bug is occurred when you tick this option “Center the employees? (use only if you have 1 or 2 employees)” on employee widget http://prntscr.com/a7n3d8.

There is missing selector in the css rule when you ticked those option. So, for a while I have to untick these option and we will fix this issue in the next update of the Sydney theme

Thank you for reporting this.

Regards,
Awan

Sure. I see that now the slider is working fine and I don’t really need to tick that option because I have exactly 3 items to display so works for now for me :slight_smile:

If you remember I wanted to remove the pop up overlay…can I go ahead and do the modification which we did earlier to the CSS code or do you recommend something else?

Regards
Divya

Great. So, I can mark this thread as resolved.

“can I go ahead and do the modification which we did earlier to the CSS code”
> Yes sure! let us know if you need more help :slight_smile:

Hi Awan,

Sorry have been AWOL for a while. Yes you may close the thread and thank you! :).

I will modify the css code as done earlier for the pop-up overlay removal and open a new thread in case of any issues after that.

Regards,
Divya