Search code examples
cssresponsive-designflexslider

Using Flexslider how to make control arrows responsive?

When resizing the slideshow, images resize together with the browser which is great, but the controls Previous/Next I replaced text with images, they stay static. Since I have used text-ident to hide text, I had to set fixed width and height for arrow images to display. Now, how can I resize it when along with slideshow images?

Solution

  • Target your arrow images via media queries for smaller screen. For eg. To target screens less than 480px, You can do something like this:

    @media only screen and (max-width: 480px) {
    .flex-direction-nav .flex-next,
    .flex-direction-nav .flex-prev {
        -webkit-background-size:50%;
        -moz-background-size:50%;
        background-size:50%;
        background-position: 50% 50%;
    }
}

    By using background-size property, you can resize your arrow images. I have made it 50% smaller. You can play with that values to fit your own taste and satisfaction.