DEV Community

lolleri200
lolleri200

Posted on

Picture won't scale with CSS scaling

So I'm trying to make a responsive page for different size devices. I was making some progress, but now my picture is not scaling well and becomes too big when in tablet size... And mobile size is not scaling well either. Can someone help with this? Here is the HTML and CSS code: https://codepen.io/Sampsa96/pen/zYqvKOy

Discussion (6)

Collapse
ianteoyy profile image
Ian T.

I feel like understanding the flexbox css will help you immensely here and remove the need for setting height and width for most of your sections. Is there a reason you choose not to use it, though?

For example, I set #content to use

display: flex; justify-content: space-evenly

and removed the width/height of its children and opted to use

flex-grow: 1

(this makes them fill available space) and here's what it looks like now:
codepen.io/ianteoyy/pen/yLOYzrO

Collapse
lolleri200 profile image
lolleri200 Author

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 on

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 Author

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 Author

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