Get rid of extra space below text

HTML-CSS
1

Hi there,

I am doing a simple project with a QR-code and two text elements

I am trying to adjust its layout for 800px screen height now.
I have it adjusted and working properly with other screen heights, but when screen height is set to 800px I have extra empty space below my heading and paragraph:

image
image994×608 23.2 KB

As you can see it’s not a padding or margin or line height…
How can I get rid of this extra empty space below text elements?

HTML:

<body>

  <main class="main-grid">

    <img src="images/image-qr-code.png" alt="qr-code" class="qr-code">
    <h1>Improve your front-end skills by building projects</h1>
    <p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>


  </main>

</body>

All of the CSS:

*,
* ::after,
* ::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



:root {
  --fw-text: 700;
  --clr-main: hsl(0, 0%, 100%);
  --clr-body: hsl(219, 43%, 87%);
  --clr-paragraph: hsl(220, 15%, 55%);
  --clr-heading: hsl(218, 44%, 22%);
}

body {
  height: 100vh;
  font-family: "Outfit", sans-serif;
  background: var(--clr-body);
  text-align: center;
  display: flex;
  align-items: center;
}

.main-grid {
  display: grid;
  gap: 0.3rem;
  width: 87.5%;
  margin-inline: auto;
  background-color: var(--clr-main);
  padding: 1rem;
  border-radius: 1rem;
}

@media (min-width: 1200px) {
  .main-grid {
    width: 23.5%;
    padding: 0.5rem;
  }

  h1, 
  p {
    padding-inline: 0.7rem;
  }

  .qr-code {
    max-width: 100%;
    height: auto;
  }
    
}

@media (min-height: 800px) {
  .main-grid {
    height: 75%;
  }

  
}

.qr-code {
  border-radius: 1rem;
  margin-inline: auto;
  max-width: 296px;
  height: auto;
  display: block;
}

h1,
p {
  width: 95%;
  margin-inline: auto;
  line-height: 1.2;
}

h1 {
  font-size: 1.4rem;
  margin-block: 1rem;
  color: var(--clr-heading);
  font-weight: 700;
}

p {
  font-size: 15px;
  font-weight: 700;
  opacity: 0.4;
  margin-bottom: 1.8rem;
}

Best regards!

2

The grid items are aligned to the start of the cell.

You can center them all using align-items: center on the grid container or individually on a grid item using align-self: center.

Or you can define the rows and their dimensions using grid-template-rows.

But no matter what the height you have defined for the grid must be taken up by something, be it content or space. So do not make it taller than it needs to be. Start by using the content and padding to create the sizes and then add height to it as needed.

1 Like