CODEWITHSUNDEEP
htmlcss
User2468
User2468

Reputation: 99

How to prevent website structure changing when zooming out?

Here is my HTML:

<div style="height:50px">

    <div tabindex="0" class="banner" onclick="location.href='Home.html'">
        Page 1
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 1.html'">             
        Page 2
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 2.html'">
        Page 3
    </div>

    <div tabindex="0" class="banner" onclick="location.href='Page 3.html'">
        Page 4
    </div>

</div>

And my CSS:

.banner {
    background: orange;
    color: aqua;
    float: left;
    width: 298px;
    height: 50px;
    vertical-align: top;
    border: 1px solid #000000;
    text-align: center;
    font-family: Garamond;
    font-size: x-large;
    display: table-cell;
    vertical-align: middle;
    line-height:50px;
    cursor:pointer;
    font-weight:bold;
}

The body of my website is 1200px wide. The website structure appears to work fine on different sized screens (from the computers I have checked it on) and all major browsers. However, when zooming out, on all devices, the far right drops down and goes to the left (beneath the first ). Is there any way to do this without any major difficulties? (time is an issue here which is why I only want a simple solution if possible). If there isn't an easy and fast way to do this, then don't worry about it, I'll just leave it as it is.

Upvotes: 2

Views: 1026

Answers (2)

Mujtaba Fadhil
Mujtaba Fadhil

Reputation: 6116

See this link about viewport meta tag, It could prevent zoom in/out by determining the views width, so I think it may help you

Using the viewport meta tag to control layout

Update:

See this link also

How can I “disable” zoom on a mobile web page?

Upvotes: 1

Graeme
Graeme

Reputation: 1117

Simple answer is, you can't. No CSS tweaks or JS detect zooming.

Upvotes: 1

Related Questions