CODEWITHSUNDEEP
htmlcss
soham b
soham b

Reputation: 1

Why does only font sizes increase on zooming in browser?

I was trying responsive layout with CSS media queries and relative width/height values (in %). Everything works fine on all screen widths until I zoom in from my browser. When I zoom in, only the font sizes increase while the div containers' height/width remains same. This "breaks up" my design. Any solutions?

The html:-

    <html>
    <head>
    <link href="style.css" type="text/css" rel="Stylesheet" />
    </head>
    <body>


    <div id="banner" style="background-color:Black; width:100%; height:15%">
    <div  style="margin-left:10%; width:20%; float:left"> <img id="logo" src="b.jpg" />
    </div> 
    <div id="title" style="  float: right; color:White"> Ganju and his activities</div>
    </div>
    <div id="dir_cont" style="margin:auto;"> 
    <img id="dir" src="a.jpg" /> <span id="dir_a">We like to introduce ourselves as     
    a........*some text*
    </span>
    </div>

    </body>
    </html>

And the css file:-

    #dir_cont
    {
     width: 80%;
     }

    #dir
   {
    width:30%;
    float:left;
    }

    #dir_a
    {
    width:70%;
    float:left;

     }


    #logo
    {
    height:100%;
    }

    #title
    {
    margin-right:10%;
    }

    @media all and (max-width:450px){
    #title
    {
    font-size:3vw;
    margin-right:0%;

    }
    #dir_cont{width:100%}
    #dir{width:100%;

    float:none;
    }
    #dir_a
    {
    width:100%;
    float:none;
    }

Upvotes: 0

Views: 261

Answers (1)

Ofir
Ofir

Reputation: 1855

Percentage size is taken from the parent container. If the parent has a fixed size (e.g px) then you will always get a fixed size. Check out http://css-tricks.com/css-font-size/

Upvotes: 1

Related Questions