Adjust 'responsiveness' with Genesis Responsive slider

Community Forums Forums Design Tips and Tricks Adjust 'responsiveness' with Genesis Responsive slider

This topic is: not resolved

This topic contains 1 reply, has 2 voices, and was last updated by  rfmeier 10 months, 2 weeks ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #44016

    marktzk
    Participant

    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?

    #44017

    rfmeier
    Participant
    Post count: 517

    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 – Web Developer @ Solid Interactive
    Twitter

    • This reply was modified 10 months, 2 weeks ago by  rfmeier. Reason: css order change
    • This reply was modified 10 months, 2 weeks ago by  rfmeier. Reason: css order change
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.