css - Preventing horizontal scrolling in mobile devices

Question

I have a very long line at the top:

#top-line {
  background: #00A1E0;
  border-bottom: 1px solid #FFF;
  height: 4px;
  position: absolute;
  top: 0;
  left: 0;
  width: 10000px;
}

So I'm using overflow-x: hidden to prevent horizontal scrolling:

html {
  overflow-x: hidden;
  height: 100%;
}
body {
  background: #EDEDED;
    font-size: 12px;
    font-family: Arial, sans-serif;
    color: #666;
  height: 100%;
  overflow-x: hidden;
}

It works OK, but in mobile phones I still can scroll indefinitely to the right.

Is there any workaround for this?

Answer 1

You should define the width:100% or max-width:100% to prevent horizontal scrolling because you define the width of the area mobile device can occupy and by its nature it is occupying more than the width of the mobile width itself so define as 100% which will restrict it to mobile width.