There was a problem with the display of the site background, if the browser window size is less than the specified size. Let's say the width of the site is 1600px. If I reduce the width of the browser to 1500px, then scrolling to the side, the place of the background will be just empty, as if it was just cut: enter image description here

As you can see, the header is "adjusted". For phones, the solution is to set the minimum width. What is the solution for desktop browsers?

I will try to describe in more detail. I use bootstrap 4 c flexbox.

Container code:

container-fixed { margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; width: 1600px; }

In general, a copy of the bootstrap, only with a given width.

The construction is approximately as follows:

 <container-fixed> <row> <block class="col-xs-12 headbg"></block> </row> </container-fixed>

Tag row an analog of class row .

 block { flex: 1; padding-left: 15px; padding-right: 15px; }

Background set in this way

 .headbg { background-image: url(".."); background-position: center; background-repeat: no-repeat; } section { width: 100%; min-width: 100%; margin: 0 auto; }
  • what are you doing for the site? - Lieutenant Jim Dangle
  • you can make the width of the container max-width: 1600px; width: 100% - Lieutenant Jim Dangle
  • one
    How can we help you when there is even no code? We psychics to understand what kind of magic you have limited the size of the block, or that is not thought out? Take the trouble to provide part of the code in which there is a problem. In the end, they often solve the problem themselves when they load the code by viewing it again. - Telion
  • @FrankSinatra Yes, all garbage. - BwehaaFox
  • container-fixed {margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; max-width: 1600px; width: 100%} try it like this - Lieutenant Jim Dangle

2 answers 2

 section { width: 1600px; min-width: 100%; margin: 0 auto; }
  • Please try to write more detailed answers. I am sure the author of the question would be grateful for your expert commentary on the code above. - Nicolas Chabanovsky ♦
  1. Set the width not in pixels, but in% (100% instead of 1600px).
  2. Put everything in the parent unit and set it to 100% width. Child set in pixels.