CODEWITHSUNDEEP
htmlcssmobileoverflowzooming
Tomas
Tomas

Reputation: 21

Page content is overflowing (to the left & the right) when zooming on mobile

The code is working very well on a desktop computer (PC) and when I zoom in and out the text remains in place, but on mobile, when I'm trying to zoom-In on this page, the text is exceeding the left and the right borders of the screen view.

How can I prevent this? I want that the only scrolling will be up and down, not left & right, and that the user will see all the page content without overflowing to the two sides.

You can test my code here:

http://fireman-suppression-84203.bitballoon.com

And here is the code:

div {
  width: 85%;
  margin: auto;
  border: 3px solid #73AD21;
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<div>Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example
  text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just an example text... Just
  an example text... Just an example text... Just an example text... </div>
<br>

Upvotes: 1

Views: 174

Answers (1)

bene-we
bene-we

Reputation: 801

Try this in your <head>:

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

Upvotes: 1

Related Questions