Employee section "Stacking" on larger screens and scrolling on small screens

Hello aThemes team!

I have an issue with the employees section:

When I am on a phone (Samsung or iphone for example) the employees section shows 3 employees stacked above eachother and 3 “dots” below it to scroll. I have 3 employees total so the scroll is not needed because it scrolls to 2 other empty pages with no other employees. Is there a way to 1: remove the scroll option as it is not needed if they are stacked, or 2: have 1 employee show up and scroll to the other 2?

Also, on the opposite side of screen sizes, with a PC, when in a “normal” resolution like 1024x768 or 1280x1024, the employee section shows the 3 employees side-by-side as expected, but when I have my screen at it’s native resolution of 1680x1050, once the window is set to full screen, it stacks the 3 employees one on top of the other like the phone. It seems like the @media css is causing it to go out of whack.

Any help with these 2 issues would be super helpful, I have just recently updated to the new 1.05 version of the theme before I noticed this issue.

If Vlad sees this, and you still have my last email with the link to the site, I would love for you to take a look and see if I messed something up

Thanks

Hi,

Still works the same for me on our demo site, without any stacking.
If you could re-send me the link I’ll take a look, I probably won’t be able to find your email.

Ok, I found your email. Start by removing the code I gave you last time. I saw you also added it in your style.css, along with the custom CSS plugin. Only thing that was changed regarding this was to remove the display of 4 employees on large.

Hey Vlad, I’ll try that tonight, sorry I didn’t see the notice that you replied sooner

Hello Vlad, I tried removing the code that you gave me last time and same issue still exists, It stacks with white backgrounds on wider monitors. I re-applied the code to the CSS as it did not change it.

What I removed is as follows:

.roll-team .team-item .team-pop .team-info {
top: 25%;
position: relative;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}

.owl-carousel .owl-wrapper {
max-width: 100%;
text-align: center;
}

.owl-carousel .owl-item {
display: inline-block;
float: none;
}

Any thoughts? and thanks again!

actually I just tested on your demo on your website. I do not get the stacking, but I get 1 employee, with a full width red overlay when I hover my mouse over an employee… as soon as I shrink the window to about 1200px wide, it goes back to 3 or 4 people side by side and the over lays etc look right, they only cover that one person

Sorry, the demo site wasn’t updated to the latest version. Have a look now please. I had a look at your site and you’re on 1.05, if you update the theme you should be fine. If you’ve added the custom code directly into your style.css it will be removed anyway.