Personal Portfolio Webpage - Build a Personal Portfolio Webpage

HTML-CSS
1

Tell us what’s happening:
I created a Grid container for the project-tiles and for some reason an extra space is displayed below each rows (not set by grid-gap). Dev tools doesn’t show any redundant margins or paddings and overflow: hidden; doesn’t work either. What causes those extra spaces to appear? How can I get rid of those?

tiles
tiles982×1108 177 KB

Your code so far

<!-- file: index.html -->
<div class="grid-container">
        <div class="project-tile">
          <a class="project-link" href="https://codepen.io/freeCodeCamp/full/zNqgVx">
            <img class="project-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute.jpg"><!--
            --><p class="project-name">Tribute Page</p>
          </a>
        </div>
        <div class="project-tile">
          <a class="project-link" href="https://codepen.io/freeCodeCamp/full/qRZeGZ">
            <img class="project-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"><!--
            --><p class="project-name">Random Quote Machine</p>
          </a>
        </div>
        <div class="project-tile">
          <a class="project-link" href="https://codepen.io/freeCodeCamp/full/wgGVVX">
            <img class="project-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"><!--
            --><p class="project-name">JavaScript Calculator</p>
          </a>
        </div>
        <div class="project-tile">
          <a class="project-link" href="https://codepen.io/freeCodeCamp/full/mVEJag">
            <img class="project-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/map.jpg"><!--
            --><p class="project-name">Map Data Across the Globe</p>
          </a>
        </div>
        <div class="project-tile">
          <a class="project-link" href="https://codepen.io/freeCodeCamp/full/wGqEga">
            <img class="project-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/wiki.png"><!--
            --><p class="project-name">Wikipedia Viewer</p>
          </a>
        </div>
        <div class="project-tile">
          <a class="project-link" href="https://codepen.io/freeCodeCamp/full/KzXQgy">
            <img class="project-img" src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tic-tac-toe.png"><!--
            --><p class="project-name">Tic Tac Toe Game</p>
          </a>
        </div>
      </div>

/* file: styles.css */
.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-gap: 2rem;
}

.project-img {
  width: 100%;
  height: calc(100% - 6.8rem);
}

.project-name {
  padding: 1.2rem;
  background-color: #303841;
  font-family: Poppins, sans-serif;
  font-size: 1.1rem;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

2

Welcome to our community!
Try to change the value of rem: height: calc(100% - Xrem);
Put a value of, for example, 4.8.

3

I changed it to 4rem, it seems good now. Thank you for the help!

1 Like
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.