Adjust 'responsiveness' with Genesis Responsive slider

[marktzk]

I have Genesis Responsive Slider running on a site with the executive theme (http://www.prsatarheel.org/beta/), but I am developing this on my 13" Macbook pro. That means that most of the time, the arrows and navigation dots for the slider are invisible to me, unless I stretch my browser window as wide as it will go. Candidly, this seems kind of ridiculous, as more and more people are using 13" and 11" laptop screens, and I can't see any reason design wise to remove the arrows and nav dots on those screens. Essentially I want to keep the arrows and navigation dots at smaller browser window sizes than the default.

How would I go about adjusting the responsiveness of the theme so that, at least on a 13" monitor like mine, the arrows and dots still show up?

[rfmeier]

Hello,

Just from inspecting the css within Chrome, try the following.

Around line ~2027, adjust the css;

#content #genesis-responsive-slider .flex-control-nav.nav-pos-excerpt{
	display: none;
}

/* prevent the arrows from hiding */
#content #genesis-responsive-slider .flex-direction-nav li a,
#content #genesis-responsive-slider .flex-direction-nav li a.prev {
	/* display: none; */
}

This should prevent them from being hidden when the screen size gets smaller.  However, they will need be re-positioned to prevent them from spilling over the edge of the screen.

I would try the following after where you just commented out the css

/* move the right arrow in */
#content #genesis-responsive-slider .flex-direction-nav li a {
 right: 0;
}

/* move the left arrow in */
#content #genesis-responsive-slider .flex-direction-nav li a.prev {
 left: 0;
}

I hope this helps.

Let me know how it turns out.

---

Ryan Meier – Twitter

[Author]

Posts