Streaming live at 10am (PST)

Slider height issues


#1

Hello!

I want my slider height to be responsive. I have it set to 100% width as I want it responsive width wise as well but I want the height to get bigger if you make the screen bigger. If I have it set as a specific pixel height it cuts off part of the bus when I enlarge the screen (for bigger monitors and such). Any ideas?

https://preview.webflow.com/preview/dj-party-bus?preview=85c1a0800943eb017ee171d7c9807972

@Waldo do you know?


#2

Anyone have any idea on how this can be achieved? If I set the slider height to a percentage it doesn't work.


#3

No one has an idea of how this can be done?


#4

Hi @Quantumgo,

You can use VW / VH measurements. 1vw = 1% of browser width, 1vh = 1% of browser height.
So you can set slider height, for example, 35vw (type without space), press Enter and Webflow app will accept it. In this way, slider will become bigger if browser window will become wider.

Hope it helps.

Cheers,
Anna


#5

@Quantumgo try using a VH height unit instead so the height is based upon the Viewport Height. Like 80vh = 80% of the viewport height. :smiley:


#6

@sabanna and @waldo thank you both so much! You two are always so helpful with everything!!!


#7

@sabanna and @waldo, this didn't work...? Do you set the whole slider to the VH or each slide individually? I tried the whole slide set to 45vh and that doesn't get bigger when I enlarge the screen. It stays the same still and the photos get cut off.

Ohh wait I got I think!


#8

Did you try to use VW instead of VH?


#9

Yes, what @sabanna said is true. Make sure to NOT use VW. That is the viewport of the width of the monitor rather than the height. :wink:


#10

I actually suggested TO USE vw. Because in this way, slider height will become bigger, when the browser window will become wider. And I think it is exactly what Liz was asking.

But who knows, I may be wrong.


#11

@sabanna this worked perfectly!!! Thank you! Exactly what I needed!


#12

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.