HTML & CSS responsive grid problem, scales perfect when using the browser inspection tool, windowed does not scale

Question

I am trying to create a design with three equal sized squares next to one another.

What I want is that at screens with a resolution above 991px width to have 3 squares next to another.

If the users screen width is below 991px and above 767px I want him or her to see two squares per row :

And when the users screen resolution is below 767px I want him or her to see one image per row.

That I have so far accomplished. Since my result is :

Above 900px screenwidth

Above 767px screenwidth

And below 767px screenwidth

Now where my issue starts. I have tested this by using the FireFox inspection tool. Scaling the screen resolution and adjusting my HTML & CSS code. And it looks perfect.

However when I try to check my result in a windowed browserscreen all of a sudden the scaling is off. And I have almost immediately two screens next to one another. But an empty field on the right. As you can see on the following screen :

My code : HTML

         <section class="home-grid">
        <div class="grid-house" data-img="images/bg.jpg">
            <div class="house-grid-content">
                <h5>Name #1</h5>
            </div>
        </div>
        <div class="grid-house" data-img="images/bg.jpg">
            <div class="house-grid-content">
                <h5>Name #2</h5>
            </div>
        </div>
        <div class="grid-house" data-img="images/bg.jpg">
            <div class="house-grid-content">
                <h5>Name #3</h5>
            </div>
        </div>
     </section>

CSS

    .home-grid {
    background-color: #0f0f0f;
    display: inline-block;
    padding: 0px;
    }
    .grid-house {
        display: block;
        width: 33.02vw;
        height: 33.02vw;
    }
    .grid-house .house-grid-content {
        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
        height: 100%;
        padding-left: 20%;
        padding-right: 20%;
        position: relative;
        z-index: 999;
    }
    @media only screen and (max-width: 991px) {
        .grid-house {
            width: 50vw;
            height: 50vw;
        }
    }
    @media only screen and (max-width: 767px) {
        .grid-house {
            width: 100vw;
            height: 100vw;
        }
    }

Edit: I have the head setup with the viewport meta-tag.

Solution by tacoshy, many thanks for that

How have you got your document set up? E.g. do you have a doctype, do you have a meta tag to setup the viewport, do you have a body element? — A Haworth, May 09 '22 at 12:44
@AHaworth I have a body element and I have the viewport set as in the screenshot in the edited post. — Alex, May 09 '22 at 12:51
the issue is, that you hardcode the width in `vw` which causes an overflow. You should use the container width instead! To make an element a square you can either use `aspect-ratio` or [this methode](https://stackoverflow.com/questions/1495407/maintain-the-aspect-ratio-of-a-div-with-css). See my answer for more details code-wise. — tacoshy, May 09 '22 at 15:13

score 1 · Accepted Answer · answered May 09 '22 at 15:12

What confuses me is, that you talk abotu Grid but never actually use a grid but inline-block. Using an actual CSS-Grid or Flexbox would be easier IMHO.

For bot, CSS-Grid and Flexbox I removed your CSS for .grid-house. Espacially setting the height and width hardcoded to be a square is ineffective. It is easier to use aspect-ratio-property or this methode.

Using CSS-Grid

In this methode I use display-grid for the container and apply 3 columns with `grid-template-columns: repeat(3, 1fr); which equaly distribute the space (as 1 fraction) to every column. In the medi query I set the columns the same way either to 2 or 1 column.

.home-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.grid-house {
  aspect-ratio: 1 / 1;
}

.grid-house .house-grid-content {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  height: 100%;
  padding-left: 20%;
  padding-right: 20%;
  position: relative;
  z-index: 999;
}

@media only screen and (max-width: 991px) {
  .home-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 767px) {
  .home-grid {
    grid-template-columns: repeat(1, 1fr);
  }
}


/* for visualisation purpose only */
.grid-house:nth-child(1) {
  background-color: blue;
}
.grid-house:nth-child(2) {
  background-color: red;
}
.grid-house:nth-child(3) {
  background-color: yellow;
}

<section class="home-grid">
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #1</h5>
    </div>
  </div>
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #2</h5>
    </div>
  </div>
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #3</h5>
    </div>
  </div>
</section>

Using Flexbox:

Just use display: flex; on the container and combine it with flex-wrap: wrap. Then set the width of the .grid-house to either calc(100% / 3) (for pixel accuracy) or 50% or 100% with is more usefull then vw/vh as it takes the container width instead of the screen width. Using vw is what causing the nasty oevrflow and issue you having.

.home-grid {
  display: flex;
  flex-wrap: wrap;
}

.grid-house {
  aspect-ratio: 1 / 1;
  width: calc(100% / 3);
}

.grid-house .house-grid-content {
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  height: 100%;
  padding-left: 20%;
  padding-right: 20%;
  position: relative;
  z-index: 999;
}

@media only screen and (max-width: 991px) {
  .grid-house {
    width: 50%;
  }
}

@media only screen and (max-width: 767px) {
  .grid-house {
    width: 100%;
  }
}


/* for visualisation purpose only */
.grid-house:nth-child(1) {
  background-color: blue;
}
.grid-house:nth-child(2) {
  background-color: red;
}
.grid-house:nth-child(3) {
  background-color: yellow;
}

<section class="home-grid">
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #1</h5>
    </div>
  </div>
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #2</h5>
    </div>
  </div>
  <div class="grid-house" data-img="images/bg.jpg">
    <div class="house-grid-content">
      <h5>Name #3</h5>
    </div>
  </div>
</section>

HTML & CSS responsive grid problem, scales perfect when using the browser inspection tool, windowed does not scale

1 Answers1