DEV Community

Discussion on: Picture won't scale with CSS scaling

Collapse
 
lolleri200 profile image
lolleri200

Thanks so how do I modify the CSS to make it responsive? When I make the page smaller it doesn't scale correctly.

Collapse
 
ianteoyy profile image
Ian T. • Edited

I removed most lines that set width and height to a fixed px and then I set #page to display:flex; flex-direction: column;

At smaller sizes, the content will be squished too close together, so at 400px I made #content have the flex-direction: column property. You can decide where the breakpoint happens though, and change the margins a little bit afterwards.

I updated my codepen to show the changes. I changed some margins and such but that's not as important.

Thread Thread
 
lolleri200 profile image
lolleri200

Thank you so much! I've been struggling with this for like a month!

Thread Thread
 
ianteoyy profile image
Ian T.

No problems! But yeah flexbox makes float mostly obsolete, and it's a lot less headache. Definitely worth learning.

Thread Thread
 
lolleri200 profile image
lolleri200

Can u help with this other page? :)
dev.to/lolleri200/the-text-won-t-s...