CODEWITHSUNDEEP
htmlcssviewporthorizontal-scrolling
Alex Buddy
Alex Buddy

Reputation: 473

How to get rid of horizontal scroll of a page

I'm making a landing and I've this set of rules applied for the body and html elements:

html {
   margin: 0px;
   height: 100%;
   width: 100%;
}

body {
   margin: 0px;
   min-height: 100%;
   width: 100%;
}

Also, everything is viewported:

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

And on the picture, below, you can see main blocks of the page, they all have width 100%

the pics

However, nothing of what I mentioned really helped and the blocks of the page despite they all have 100% width, have different size and, there's a horizontal scrollbar too.

What should I do to get rid of the scrollbar and to make all the blocks be the size of a current viewport?

Upvotes: 0

Views: 4133

Answers (3)

FrontMonkey
FrontMonkey

Reputation: 360

you shouldn't have horizontal scrollbar. If you have horizontal scrollbar - one of the elements overflow the main page. Try to find which makes the problem. If you use overflow - you don't correct the problem, but cover it. It will blow when you scale the page - the content won't be center.

Upvotes: 3

herrh
herrh

Reputation: 1368

Delete width: 100%; from body and html.

Upvotes: 0

diwang
diwang

Reputation: 108

try put 

overflow-x: hidden;
overflow-y: scroll;

at the body {

Upvotes: 6

Related Questions