0
#main {
    width: 100%;
    border: 0;
}

I have this for my mobile page. But it creates horizontal scrollbars. Why?

I tried the overflow: hidden trick on html/body, but that messes up other things for me.

Is there no way to just simply set the width to 100% and actually have the width be exactly 100% and no more?

Anthony Frizalone
  • 143
  • 1
  • 7
  • Many factors could determine why you're getting the side scroll. We would have to look at more of your code to figure out the exact issue. Can you post a minimal block of code that reproduces the error? – PsiKai Oct 30 '21 at 00:58
  • Without seeing a working example any answer is just a guess. Please see https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Oct 30 '21 at 07:16

1 Answers1

1

Usually mobile devices will try and show the entire desktop version of the site if there are none made for mobile. It really depends what the sizing of the rest of your content is based on. If you have absolute sizing based on pixels your content won't change according to size.

@media (min-width: 764px) {
    #main {
    }        
}

Often a media constraint can help if that is the case. You need to alter your other absolute values to change according to the width of the screen.

This could also be helpful: Responsive css styles on mobile devices ONLY

ConnerWithAnE
  • 1,106
  • 10
  • 26
  • I'm already using this actually. My outermost container is my "main" container which is has width set to 100%. Everything else inside of it is based on percentages. So I don't understand why I'm seeing scrollbars. My solution was to use width: 95% on my "main" container and just accept the fact that I'm not getting the full width. – Anthony Frizalone Oct 30 '21 at 00:56