css layout get distorted when zoom in

Question

Page adjust according to screen resolution like stackoverflow problem with zooming and css layout get distorted when zoom in. i'm new in css and first and very big problem i am facing is that when i zoom in or out page get distorted. i want to do something like my page fits every resolution. please give me such solution that i can apply on whole page including body and footer

HTML:

<div class="wrap">
    <div id="head">
        <div id="head_back">
        <b id="logo">LOGO</b>
        <div id="nav">
            <b>2000</b>
            <b>2001</b>
            <b>2002</b>
            <b>2004</b>
        </div>
        </div>
    </div>
</div>

CSS:

.wrapper{width:100%; background-color:red; overflow:auto; margin:0; padding:0;}
#head
{
    width:100%; height:100px; 
    color:#902df3;
    position:relative;
    top:-10px;
    left:-7.8px;
    font-family:"Arial Black", Gadget, sans-serif;
    padding-right:17px;

}
#head #head_back
{
    position:absolute;
    line-height:90px;
    top:0;
    left:0;
    width:100%;
    height:100px;
    background:#999; background-size:cover; background-repeat:no-repeat; 
}
#head #logo
{
    font-size:46px;
    position:absolute;  
}
#head #nav
{
    font-size:26px;
    position:absolute;
    left:60%;   
}
body html
{
position: fixed;
width: 100%;
overflow:scroll;
}

That's normal. Browser zoom sucks. – Diodeus - James MacFarlane Aug 09 '13 at 20:51 — Diodeus - James MacFarlane, Aug 09 '13 at 20:51
Are you talking about zooming or different screen sizes? – aldux Aug 09 '13 at 20:55 — aldux, Aug 09 '13 at 20:55
different screen sizes @aldux – user2669195 Aug 09 '13 at 20:56 — user2669195, Aug 09 '13 at 20:56

score 1 · Answer 1 · answered Aug 09 '13 at 20:58

First of all, you should have a viewport meta tag:

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

Then you can use media queries:

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

Check out this good resource on media queries: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

You can try messing with the css zoom feature or changing your units see this post for more help

How can I scale an entire web page with CSS?

If you are just trying to make it so your site looks different on mobile,tablets or desktops your best off using media queries in CSS and styling each one by a defined min-device-width.

edited May 23 '17 at 10:26

Community

1
1

answered Aug 09 '13 at 20:59

wmfrancia

1,176
2
10
25

score 0 · Answer 3 · answered Aug 09 '13 at 21:00

CSS Positioning is one of my least favorite aspects of web design. Unfortunately, it also happens to be rather important.

Since there wasn't a link or anything for us to replicate the issue and verify with certainty what the problem is my answer will be mainly conjecture.

The most likely cause of your issue is due to the mixing of the absolute and relative positioning of your elements. The relative elements should change when the the browser size is changed / zoomed. Absolutely positioned elements would not.

One of the easier-to-follow guides out there: http://www.barelyfitz.com/screencast/html-training/css/positioning/

I would also suggest installing the Firefox plug-in "Web Developer" and "Firebug". These tools will allow you to modify the css settings on-the-fly to test what may actually be causing the problems.

score 0 · Answer 4 · answered Feb 09 '15 at 13:03

0

Use the CSS code min-width for your body or your desired div. Example:

body
{
    min-width: 1366px;
}

You can refer to this webpage for a better comprehension of the code above: The MDN Page

Hope this helped.

answered Feb 09 '15 at 13:03

Rezwan Azfar Haleem

1,198
13
23

css layout get distorted when zoom in

4 Answers4