Responsive Slider – not responsive – Metro Pro

[yolohtzin]

Hi - for some reason the genesis responsive slider is not being responsive -does anyone know why please.

Heather

http://joanvidargas.com/

[David Chu]

Hi,
That was a tricky little problem to find. The general problem is that you (or someone) are trying to play with the dimensions of content and using fixed widths for that. This can defeat responsiveness in any element, not just a slider.

The most obvious smoking gun is the width setting below. When you get to a narrow screen, this will keep the screen wider than the device.

.site-inner {
clear: both;
margin-left: auto;
margin-right: auto;
 width: 960px;
}

You could try "100%" instead, but that will cause you to need changes elsewhere, too. There are other things interacting with this. Various floats and widths. In the following line, you also have a fixed width that will fight with widths elsewhere:

.content {
float: right;
width: 700px;
}

That should point you in the right direction. You'll probably need to fix other spots, too - other selectors, or writing code for the smaller breakpoints. Finally, if you're changing the stufff above, it will affect other pages, so you may need to write variations that are specific to the slider (or home page).

This is a great illustration of how special skills may be needed even on a quality theme.

Good luck!
Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts