CODEWITHSUNDEEP
htmlcss
Marc Hoover
Marc Hoover

Reputation: 97

Mobile CSS rizing window instead of going past width

If I have something like this:

.div {
    width: 105vw;
}

It won't go past the browser window. Instead, it will just make the browser wider. Does the same thing when I use a media query with max-width of 475px and I set the width to 600px. How do I get it to go past the screen? I am trying to do this:

// Make the div go past the screen on both sides

.div {
    position: relative;
    width: 105vw;
    left: -8px;
}

And that seems to work on desktop, but not mobile.

Edit: Viewport:

<meta name="viewport" content="width=device-width, user-scalable=no">

Upvotes: 2

Views: 53

Answers (1)

Tyler Roper
Tyler Roper

Reputation: 21672

The issue is that the iPhone browser is zooming out to fit the entire contents of the page by default. The solution is to replace the <meta> tag with one that sets the initial scale, like so:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

Upvotes: 3

Related Questions