CODEWITHSUNDEEP
htmlcss
vicenrele
vicenrele

Reputation: 971

How to avoid horizontal scroll on mobile web with responsive web design?

I've an adaptable web application. To avoid horizontal scroll I've written the following CSS code:

html {
    overflow-x: hidden; }

This works fine on desktop, but not on mobile. If I display the app on a mobile device, the app adapts fine. The problem is when I do scroll from right to left. The page moves a bit. I want the page to not move horizontally.

Edit:

The page doesn't scroll on all mobile devices. I've tried it on two devices with the same version of Android and it only scrolls on one of the devices.

Upvotes: 27

Views: 118675

Answers (11)

Peter Mwansa
Peter Mwansa

Reputation: 1

Make sure you add the following tag to your html

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

Upvotes: 0

Elijah
Elijah

Reputation: 2223

My problem was that when I zoom in and zoom out on mobile, the UI would not fully zoom back out to what it initially was. I found this https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag#viewport_width_and_screen_width

<meta name="viewport" content="width=device-width, initial-scale=0.86, minimum-scale=0.86">

Upvotes: 0

CrisEfst
CrisEfst

Reputation: 11

I'm really a beginner but I wanted to share my experience you might find it helpful.So I was making a site with a buggy template and noticed that in the responsive view it had a white space that let you scroll to the right,I thought it would be fixed by changing body or html width and overflow.But really it was the container for the menu that popped up when you pressed the icon for it.In other word the transition for it was ''width ease in 1s'' but by doing that it reserved some blank space to the right when it was hidden.So I just changed the transition toggle from width to height although I don't really know if that was needed at all or I just should do it with ''diplay'', and it went away.Hope that was helpful!

//example//

.opened {
    display: block;
    height: 90%;
    transition: height 1s ease-in-out;
}

.closed {
    display: none;
    height: 0px;
    transition: height 1s ease-in-out;
}

//instead of ''width'' like it was before.//

Upvotes: 1

LWRMS
LWRMS

Reputation: 597

Adding to Dexter's Bootstrap comments with the the top answers for padding, Bootstrap users should also look at the various spacing utilities / classes.

Link below for the current documentation though you may need to look at the relevant documentation for your Bootstrap version.

Anything with a p- or px- can cause horizontal scrolling problems even if contained inside .row.

Sometimes a pl- or pr- can solve a px- that creates a horizontal scroll bar. Or a px-2 works in place of a px-5.

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

Upvotes: 1

Dexter
Dexter

Reputation: 9344

If any of you using Boostrap and came across this question then here's the answer.

for Bootstrap Users

Wrap your .row with .container or .container-fluid and it will solve the issue.

Upvotes: 4

Richard Dev
Richard Dev

Reputation: 1170

I just wanted to share how I solved my issue. I tried everything including the overflow-x, adding a red border to all elements, etc. Still was able to scroll right.

1st I started by deleting containers in "inspect element" until the scroll right was not possible. Then drilled into the div's that were the problem. It was a hidden drop down div that was on "visible: hidden" and display:block;. I fixed that by putting "display:none" and all is good now.

Upvotes: 1

BaptisteGillard
BaptisteGillard

Reputation: 380

You can put this in your console to outline all block/div. Then you can find the one which is outside of your container.

[].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)})

Upvotes: 38

Nuno Sarmento
Nuno Sarmento

Reputation: 427

Set your mobile viewport on your html header

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

Make sure your hide de overflow

  body, html { overflow-x:hidden; }

Upvotes: 2

user3302919
user3302919

Reputation: 375

If is not working for mobile you should use the following meta tag:

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

this will set the width to device width.

Upvotes: 19

Jonathan
Jonathan

Reputation: 3034

Check all the paddings. If you add padding to something with width set to 100% it will go outside the parent.

Shown here http://jsfiddle.net/wzZ3W/

Code

<div id="fillX">
    <div id="childXFill">
    </div>
</div>

#fillX
{
    background:red;
    width:100%;
    opacity:0.5;
}

#childXFill
{
    background:blue;
    width:100%;
    padding:10px;
    opacity:0.5;
}

Also check negative left and right margins on elements that span the page. E.g. http://jsfiddle.net/s7zrukj2/2/

Also, use a CSS Reset.

If you wan't to use overflow: hidden you should probably set it on the body element too. Like so

body, html { overflow-x:hidden; }

Although the fact that something is overflowing indicates an error in your responsive design and you should try and fix it instead to prevent something not being visible to a mobile user.

Upvotes: 48

Luke Robertson
Luke Robertson

Reputation: 1652

You will need to make sure the width of the parent container isn't wider than the mobile screen size

So best bet is to use % widths for everything and ensure no content has fixed with that would be bigger than a mobile screen size

Upvotes: 4

Related Questions