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">

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>