The elements on an html page change position, when resolution is changed

I am newbie in the sphere of HTML and CSS. I made my first website one day ago and I was wondering if you could help me prevent the elements of my page change position when the resolution is changed. I have sent this to a colleague and he has lower resolution than I have and on his screen he needs to zoom out in order to see it the same way I do.

I researched of course and I found that when I put this meta which is with the name “viewport” it will adapt with the resolution on different devices (Even phones), but however nothing changed.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

This is what @media queries basically do in css.
Try playing with your page width and you’ll see the change.
So, basically, the default color of the header is crimson (kinda red’ish), but when the screen-width is 800 or less than 800 – then it’s color will be green.

You can apply this logic to your page and make it all work.
I know this can be tiring if you have big website and have to re-render it all by yourself but it still very good for aligning items.

For more responsive pages, read more about Bootstrap here, and about Flexbox here.

        #header1{
            color:crimson;
        }
        @media only screen and (max-width: 800px) {
            #header1{
                color:greenyellow;
            }
        }

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <h1 id="header1">Lorem ipsum dolor sit amet.</h1>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0