Resolutions Issues with CSS and HTML

Question

I was making a website, with this HTML and CSS files :

https://pastebin.com/Ldh12gt7 for HTML

https://pastebin.com/8igc0DXm for CSS

It renders perfectly on my browser, and also renders perfectly on other browsers, but on my PC.

My resolution is 1920x1080, and the website is shown there https://i.sstatic.net/wtjVs.png

But, when a my friend tries to load it on a 1680x1050 resolution, the website appears to be like this https://i.sstatic.net/4M9aX.png

How can I fix this? I already tried to this in many ways.

First, I setted all width and height with percentages.

Then, I used normalized.css(no effect, so I removed it).

So, I tried to set font-size with various values(vw, vh, ch, em etc. etc.) but didn't work.

Finally, I tried to catch user's resolution with @media and set zoom value: it worked but I can't do it for every resolution that exists.

Oh, also, my friend tried to set his resolution to 1920x1080, but nothing changed.

Answer 1

You should use media queries as:

Change the *value* accordingly.

To configure the CSS for the smaller screens then yours:

@media only screen and (min-width: *value*) {
    .class_name{
        //new CSS property
    }
}

To configure the CSS for the larger screens then yours:

@media only screen and (max-width: *value*) {
    .class_name{
        //new CSS property
    }
}

After that, you can check the responsiveness and view of your webpage on the different screen size devices using this application