Genesis Slider in Sidebar Changes Size on Last Slide

[modernsugar]

I've added the genesis slider to the top of my sidebar in the education pro theme. For some reason on the last slide the size changes which looks awkward. All 3 slides are exactly the same size, and the slider is also setup on the first page and it doesn't change size on the last slide. I can't figure out what's causing it to shrink.

Because it looks so bad I disabled it on the site so not sure anyone can troubleshoot without actually seeing it live.

[sangfroidweb]

Could you enable it on one test page using Jetpack Visibility or similar so we can take a look? I think we'd have to see it to be able to offer anything other than guesses. 🙂

Thanks!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[modernsugar]

Thanks didn't even think of doing something like that - I have it setup on a test page -
https://mmsa.org/test/

I'd love to know why the last one shortens up and would also love to get rid of the lines under it when it's in the sidebar. On the front page it doesn't display with lines and every slider is the same dimensions.

[sangfroidweb]

Hi!
The list-items in the slider and the slider navigation are inheriting a border and some paddings/margins from the CSS that is intended for "regular" list items in the sidebar.

This is the CSS on line 1683 which gives all list-items in the sidebar a border on the bottom (the lines you are seeing) as well as bottom margin and padding (the reason you see multiple lines)

.after-entry li,.sidebar li {
border-bottom:1px dotted #ddd;
margin-bottom:10px;
padding-bottom:10px;
}

The reason that the last slide appears to shorten up is that there is a declaration to make the bottom margin 0px on any list-item "last child" located within a widget on line 887:

.widget p:last-child,.widget ul > li:last-child,.widget-area .widget:last-of-type {
margin-bottom:0;
}

To prevent these rules from cascading down to the list-items in the Genesis Responsive Slider, we just need to put in CSS to override it and prevent the margin, padding and border from being applied. This should do the trick:

.sidebar #genesis-responsive-slider li {
border-bottom:none;
margin-bottom:0px;
padding-bottom:0px;
}

Hope this helps!
Liz

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[modernsugar]

Works perfectly - thank you so much!

[sangfroidweb]

Awesome..You're welcome! 🙂

---

Liz or Eddy @SangFroid Web — Customizing StudioPress themes at http://www.wpstudioworks.com and building custom Genesis Child themes for businesses at http://www.sangfroidwebdesign.com 🙂

[Author]

Posts