Tagged: Layer Slider, responsive
I would like to apply some sort of responsive rescaling to the Layer Slider when the browser size is reduced beyond a certain size. At the moment, the right half of the Slider is an image and the left half is text. The text, when reduced below a certain screen width looks strange in comparison to the H3 writing beneath it, so I would like to automatically rescale the Slider so it becomes just the picture. For the picture to retain its correct proportions however, the height of the Slider would need to double at this point, while the width would halve. Is there any way of doing this? (I can provide screenshots if that would help clarify!)
Screenshots below.
Top two are fine – screen is wide enough for text in slider to be readable & fairly well proportioned. The third however is mobile size screen & text is out of proportion. The fourth is how I would like the Slider to behave below a certain screen width:
Hey!
All of the scaling options for LayerSlider are available within the plugins options alone. If you wanted to do some additional styling of text within the content areas you would need to use some custom css classes add onto those elements and then change the text size with media queries.
Cheers!
Devin
Yes – ok – think media queries will have to be the way to go…