Picture won't scale with CSS scaling

#css #html #webdev

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

Top comments (6)

Ian T. • Aug 11 '20

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

lolleri200 • Aug 12 '20

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

Ian T. • Aug 12 '20 • 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.