CODEWITHSUNDEEP
javascripthtmlioscssiphone
AxA
AxA

Reputation: 65

How to disable horizontal scrolling in html for the iphone

Actually working on my second site and I want it to be capable for all devices, but unfortunately when I open it on my Iphone there is a horizontal scrolling bar which leads to a white page, and I don't want that.

By the way, I already used the meta code, and I stopped scaling

Code:-

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no">

HELP ME GUYS ..

THANK YOU ! .

.

.

EDITED

I fixed by problem by adding this code ..

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

But now there is another problem Check out this picture please

Actually there is a space before the button .. And I can,t move the button up

Upvotes: 1

Views: 4901

Answers (2)

Jorden
Jorden

Reputation: 163

You could write a media query in your CSS. Depending on the IPhone size you're looking for.

/* ----------- iPhone 6 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) {overflow-x:hidden;}

If you're looking for a different IPhone size, simply look up there widths and adjust the media query as neccessary.

Upvotes: 0

kenfire
kenfire

Reputation: 1355

If CSS is acceptable for you instead of HTML:

html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

Upvotes: 8

Related Questions