Website Layout "Breaks Apart" When Zooming in or Out in Browsers + a Few Other Basic CSS Questions

How to save my website from collapsing when I zoom out my browser?

So far, I do not see the problem in Safari, which is actually a good thing. I can show you a better method to hold everything in one line and that is this JsFiddle. Let's break it down a little bit more though. If we are looking at this specific CSS element:

.container {
    background-color: #160b9c;
    margin: auto;
    color: white;
}

We come to notice that it is not holding the divs inside of it in any special order or way. So that is why we restructure and add a display element:

.container {
    background-color: #160b9c;
    margin: auto;
    color: white;
    display: inline-block;
}

And that should fix your problem. However, if this continues to not work for you, your question has been asked before and it's actually located here and the top answer did a magnificent job explaining a few things.

Another thing I would like to leave you with is the Almanac. This can help you with any problem or hopefully any problem that you are having with CSS. And I would also suggest making sure everything is... current. So in other words, try to find the best screen size and this website can help you to find that.

Overall, good luck on your future coding, you got this :)

How do I stop a CSS layout from distorting when zooming in/out?

As this question still gets constant views, I'll post the solution I use currently.

CSS Media Queries:

@media screen and (max-width: 320px) { 

/*Write your css here*/

}

@media screen and (max-width: 800px) { 

}

Check out:
CSS-Tricks + device sizes and Media Queries

Elements leak out of center column when zooming

I think this is because you div#midColumn has margin: 0 auto (so it is centered) but the background image in on you body. So if you zoom too hard, the left page margin's are gone, which moves your divs relative to the background image.

So you could try to make the body background blue and put the page image on the div#midColumn.

Zoom changes the design layout

My best guess for why is that this is due to rounding errors as it scales down. For example if you imagine a box which is 250px wide and contains two boxes side by side that are 125px wide each. Clearly these fit side by side. If you zoom out so that you are at half size then the outer box will be 125px and the inner ones 62.5px each which rounds up to 63px half pixels are as small as you get). These two now come to a total width of 126px so no longer fit side by side and one would have to go under the other.

This is basically the principle you have at work here I think. The best solution that I can see would be to make the two side by side boxes narrower and float one to the right so that your right border is unbroken. this may mean a slightly bigger gap down the middle but that gap can hopefully absorb rounding errors as you zoom out...

Edit:

As you have noted the borders are the main thing causing confusion. They can be taken off of the outer containers and put on a nested container designed just to add borders.

http://jsfiddle.net/chrisvenus/pdQrQ/6/

The above is a fiddle (based on yours) which creates inner DIV tags that contain the border while the floated containers have no border at all. This now seems robust enough to work in IE8, FF7.0.1 or Chrome 14.0.835.202.

The things changed were adding the div to the HTML and swapping some classes around between it and its parent. There was a new innercontainer class that sets the height and width to 100% to ensure it fills the containing box (and thus the borders are where they are wanted. Also I changed the width of the bottom box so that it lined up correctly.

Let me know if this does you.

Why did my website's layout fall apart?

What's Going On

You mentioned that things all fell apart suddenly. Any one valid CSS rule is only going to affect certain things, so when multiple problems occur due to a single change, I tend to look first for typos: Missing brackets and Missing semi-colons.

Those are your culprit here. The main problem is that you are missing a closing bracket, which is causing much of the CSS to not be applied. There are also a few missing semi-colons which are causing some minor effects to not be applied on certain browsers.

Code

Updated Fiddle

Current:

aside .socials a {
    position: relative;

aside .socials a:hover {
    position: relative;
    top: -1px;
}

Correct: (Missing Closing Bracket)

aside .socials a {
    position: relative;
}

aside .socials a:hover {
    position: relative;
    top: -1px;
}

---

Current:

header nav ul li a:active {
    -webkit-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Safari/Chrome */
        -moz-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Firefox */
            -box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* fallback */
}

Correct: (box-shadow doesn't have a -)

header nav ul li a:active {
    -webkit-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Safari/Chrome */
        -moz-box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* for Firefox */
            box-shadow: 0 0 5px rgba(0 ,0, 0, 0.8) inset; /* fallback */
}

---

Current:

-webkit-transition: background-color 0.15s ease-in-out
    -moz-transition: background-color 0.15s ease-in-out
        -o-transition: background-color 0.15s ease-in-out
            transition: background-color 0.15s ease-in-out

Correct:

-webkit-transition: background-color 0.15s ease-in-out;
    -moz-transition: background-color 0.15s ease-in-out;
        -o-transition: background-color 0.15s ease-in-out;
            transition: background-color 0.15s ease-in-out;

---

Summary

Any time everything goes haywire all at once, be suspicious for typos ... especially missing brackets.

---

Related Topics