The text 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 text and picture is not scaling well and becomes too big when in tablet size... And mobile size is not scaling well either. Also, there is something wrong with the footer. Can someone help with this? Here are the HTML and CSS code: https://codepen.io/Sampsa96/pen/oNxzrMW

Comments

[Kim Hallberg]

Well, I noticed that you set your article.page to a width of 1080px as the default, and then you're not changing it on the other viewport sizes, as well not structuring your CSS in a way that's understandable at first glance, such as mixing media queries and non-media queries, the best approach of doing responsive front-end is to go with the mobile-first approach, that way you're dealing mostly with simple rows and then you add the more complicated designs on top of that, here's a quick demo I made for you. 🙂

codepen.io/Thinkverse/pen/oNxzrJw

I hope that helps.

[lolleri200]

So how do I make this webpage responsive?

[Anders]

You should probably look into media queries and adapt your CSS depending on the viewport size, or alternatively work with %:ages and max-width etc
w3schools.com/css/css_rwd_mediaque...