CODEWITHSUNDEEP
javascripthtmlcss
frosty
frosty

Reputation: 2649

Body of page not shrinking at all, CSS, HTML

Right now I have a body with a width of 90%, and a left and right margin of 5%, and a border of 1px. Here's what I'm trying to do. I'm trying to make it so that when you zoom out all the way using ctr-, it'll shrink until it's a pin-prick in the middle of the page, but right now the body's width isn't shrinking at all when I zoom out all the way. It's staying the same size. Not sure what I did wrong. Please take a look at my code.

body {
width: 90%;
margin-left: 5%;
margin-right: 5%;
border: 1px solid black;
}

P.S: If you're not really understanding what I'm talking about, please either hit ctr-, or ctr and the scroll thing on your mouse until your page's size is around 25%. Do you see how stackoverflow is like a pin-prick smack-dab in the middle? Do you see the width of the entire site being shrunk down to that size? Well, when I do that, the body of my site doesn't shrink at all. It stays the same size.

Upvotes: 0

Views: 1198

Answers (2)

Hatora
Hatora

Reputation: 76

I think this will fix your problem. Though best not using your body element as a wrapper. Use a div with the ID of wrapper like so.

#wrapper {
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    border: 1px solid black;
}    
<body>
    <div id="wrapper">
    </div>
</body>

What this code does is sets the width to 90% so auto in margin property to take effect which centers your wrapper in the middle of their screen and uses border-box property so the border 1px width will not effect the layout, though you could use outline: 1px solid black if you do not want to use border-box.

Upvotes: 1

Zainab Zainab
Zainab Zainab

Reputation: 80

Change % to px 

body {
width: 1000px;
margin-left: 5%;
margin-right: 5%;
border: 1px solid black;
 margin:auto;
}

Upvotes: 3

Related Questions