The problem is that through the comp, the block is stretched correctly, the entire width of the page, and through the tablet or phone, the div stretches to the edge of the screen, and when scrolling to the right or decreasing the scale, it remains there. The screen at the bottom with an example of a smaller scale. The block is marked with a red arrow.

What I tried and did not help:

body { width: 100%; height: 100%; } .div { min-width: 100%; min-height: 100%; position: relative; }

alt text

  • And if instead of min-width - width: 100%; - soledar10 2:51 pm
  • Equally = ( - Rammsteinik
  • something obviously interferes, you have to look at the code and styles. If not, you can try this .div {position: absolute; width: 100%} Only content will need to move down to the height of this block. - webphp
  • Absolute does not fit. With a full screen, everything is fine, as the browser is reduced, when scrolling to the right, the block remains in place. - Rammsteinik

1 answer 1

This happens when the blocks of the site do not fit in the width of the screen and remain beyond its borders. One of the consequences is a horizontal scroll. At the same time, those blocks whose width was specified as width: 100% remain with that width. As a result, you scroll to the right, and you see an empty area.

This can be solved quickly like this:

 body { min-width: 1000px; }

This will set the page to a minimum width into which all your blocks are guaranteed to fit. And even if the screen is not wide enough to display all the blocks, a horizontal scroll will appear - blocks with width: 100% will be displayed in the entire specified width of 1000px .

Plus, it is useful to set the same value in the meta tag in head :

 <meta name="viewport" content='width=1000' />

Thus, coming from a mobile phone, you will see the whole page as a whole, as much as possible "otmumlennoe".