Question 43545 in Html Question posted in
Some basic documentation can be found here.

Display problems on different screen sizes – Html

There is a site that is displayed absolutely fine on my PC, but on a laptop or screen a scroll bar appears at the bottom, I tried to apply different styles to the wrapper, but if the site began to display normally, then problems began when the resolution was reduced.

Display on PC:
enter image description here

Display on laptop:
enter image description here

Display on laptop when changing resolution:
enter image description here

The site structure looks something like this:

<div class="wrapper">
<section class="section">
            <div class="container">
                <div class="main__content">
                    <h1>Content</h1>
                    <p>Content</p>
                    <p>Content</p>
                </div>
            </div>
        </section>
</div>

Bounding box styles:

.container {
    width: 100%;
    padding-left: 40px;
    padding-right: 40px;
    margin: 0 auto;
}

.wrapper {
    min-width: 1720px;
}

Changes made:

Added the following styles:

.container {
  width: 100%;
  margin: 0 auto;
}

enter image description here
If you add a background, it looks like this:
enter image description here

But I need it to shrink adaptively when the resolution decreases, and so that the navigation in the site header does not run into each other.

Tags:

3

Answers


  1. 0

    Your issue is making your wrapper have the set width of: min-width: 1720px; setting this min-width you are telling the element it has to be that large, which will look odd on mobile as those screens are not that large.

    There are many fixes for this that are easy, but a quick example which simplifies your code slightly and gives the responsiveness you want is here:

    .container {
  width: 100%;
  margin: 0 auto;
}

.wrapper {
  /* not actually needed */
}

.main__content{
  padding-left:40px;
  padding-right:40px;
}

    And the HTML

    <div class="wrapper">
  <section class="section">
    <div class="container">
      <div class="main__content">
        <h1>Content</h1>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>
  </section>
</div>

    You noted in the comments that you have a "white" area that shows around the divs. To fix items like this and keep a background color consistent you need to style the area holding the page (i.e. body) to have the look you want.

    For example, adding this to your body element will make the whole background blue:

    body {
  background: blue;
  /* to make text legible */
  color: white; 
}
    Login or Signup to reply.
  2. 0

    The wrapper class has the property min-width set to 1720px which indicates that your content can’t go lower that that width, which makes the horizontal scrollbar appear in lower resolution screens.

    You probably want to choose a lower value for min-width

    .wrapper {
  min-width: 340px;
}
    Login or Signup to reply.
  3. 0

    The problem has to do with your min-width attribute. If you change it to a max-width attribute with the same value, the scroll bar disappears.

    .wrapper {
    max-width: 1720px;
}

    You can still try a few things after that, like adding the min-width attribute as well, but with a lower value.

    But that still works on PCs only and not on all screens. That’s why you need to make your website responsive. The easiest way to do it is with media queries, where you define different CSS codes you want to run on 2 or 3 different screen sizes.

    I’m not sure how you want your website to look in the end, therefore I suggest you watch a video or two on YouTube on Responsive Design. This should help you with your endeavors.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search