CODEWITHSUNDEEP
htmlcss
jessica
jessica

Reputation: 1687

Div not expanding in width when zooming in

I have a div that's centered, the width set to 50%, and the max-width set to 100%. However, when I zooms in, the width does not increase at all while the height increases every time I zooms in. Why is that happening even though I set the max-width to 100%, and how do I fix it? Thanks.

#outer {
border-radius: 10px;
background-color: #F5F5F5;
border: 1px dotted black;
width: 50%;
max-width: 100%;
margin: auto;
margin-top: 1%;
}

<div id = 'outer"></div>

P.S: I still want to use percentage over pixels.

Upvotes: 3

Views: 2866

Answers (1)

Joaqu&#237;n O
Joaqu&#237;n O

Reputation: 1451

I think I understood what you want. Your problem is where you put your <div>.

As you probably know, percentage is a relative measure. In particular, width: 50% is relative to parent's width.

Case 1

Parent's width is 100%. In this case, your div's width will allways be 50% of 100% which is 50% of the screen even if you zoom in/out.

Case 2

Parent div has an absolute width (for example 500px). Then, your div's width will be 50% of 500px, which is 250px. When you zoom in/out, this will change.

Here is a jsfiddle showing both cases. Hope this helps: https://jsfiddle.net/jormaechea/om91sody/

Upvotes: 2

Related Questions