One of the most common issues I see people have when making their website is how everything seems to shift out of place when viewing on different resolutions and devices.
Luckily there is a very simple trick for this, and it only requires a little bit of CSS.
Basically how this works is by setting a fixed size for your website's body, so when people view it at different resolutions, the window size may be different but the website's body itself stays the same size.
When you first make your page, you'll first need to have a general idea of how big you want it to be.
My website is 900 pixels wide AT MOST. But you can set this to any size, as long as everything can fit in it.
Using CSS, you set a fixed width for the body IN PIXELS.
NOT percentages or fractions, because those are based relative to the browser window size.
Then, you'll need to add position: relative to the body, but you don't need to add a value.
The default for relative is static, so the body will stay in place unless you tell it not to.
The code should look like this:
body {
width: 900px;
position: relative;
}This makes it so everything with the position property inside the body is positioned relative to the BODY, INSTEAD of the browser window.
(That basically means every image and element stays in the same place, as long as the body is a fixed size. Just make sure to position your elements in pixels)
And... That's it. It's really that simple.
Why this works:
The default for the body is as wide as the browser window. That's why everything inside the body will shift out of place whenever you resize the browser window. That's why you have to set a fixed size, as well as add position to the body. Or else elements positioned inside the body will default to its closest parent element that DOES have positioning. In that case, it's html instead of body.
So you have to tell it to default to the body instead.
(Note: DONT position html, it will break things.)
"But now my website is stuck on the left side of the screen and not in the middle!"
That's because you now have space between body and html.
All you have to do is center it.
body {
width: 900px;
position: relative;
display: block;
margin-left:auto;
margin-right:auto;
}Now try resizing the window. The body should stay the same size, but still stay centered.
"But now my background image is cut off!
sigh, because the body isnt the size of the window. Put the background image in html instead.
Happy coding!