CODEWITHSUNDEEP
csssass
samlandfried
samlandfried

Reputation: 821

Scale a sidebar based on window width

I have a sidebar that I want to be 200px wide when the window is 620px wide, and 240px wide when the window is 938px wide. The window will always be between 620 and 938px. I would like the sidebar to scale between 200-240px based on the window width. I have a JavaScript solution that sets the sidebar width everytime the window is resized, but I'm wondering if there is some way to do this with CSS or SCSS. Any ideas?

Upvotes: 0

Views: 448

Answers (1)

c-smile
c-smile

Reputation: 27460

Define all lengths of your sidebar in vw units and so it will scale with your window.

So instead of 

aside { width: 200px; }

you will have 

aside { width: 32vw; max-width:240px; }

That will give you ~200px on 620px window and 200..240 on larger windows.

Upvotes: 1

Related Questions