Grid keeps overflowing out of its parent elements - Build a Personal Portfolio Webpage

HTML-CSS
1

my .projects grid keeps overflowing out of its parent elements when the page is wide. setting a max-height on the grid affects the background color which i added to help me visualize different elements, but it doesn’t seem to affect anything else about the grid.

i’ve tried a million things and have been pulling my hair out for weeks over this issue. some help would be seriously appreciated. i just want a simple little grid that fits within its container no matter the viewport size.

Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <header>
    <nav id="navbar">
      <ul>
        <li><a href="#welcome-section" id="navlink">Welcome</a></li>
        <li><a href="#work" id="navlink">Work</a></li>
        <li><a href="#contact" id="navlink">Contact</a></li>
      </ul>
    </nav>
  </header>
  <body>
    <section id="welcome-section">
      <h1 class="headers welcomeh">Welcome to my portfolio</h1>
      <h3 class="subheaders welcomesh">I am a web designer</h3>
    </section>
    <section id="work">
      <h1 id="" class="headers workh">My Work</h1>
      <div class="projects-container">
        <div class="projects">
          <div class="project p1">
            <a href="">
              <img class="project-img" src="https://i.imgur.com/MlRgZYW.png" />
              <p class="project-title" id="project-tile">Survey Form</p>
            </a>
          </div>
          <div class="project p2">
            <a href="">
              <img class="project-img" src="https://i.imgur.com/otTPIWP.png" />
              <p class="project-title" id="project-tile">Tribute Page</p>
            </a>
          </div>
          <div class="project p3">
            <a href="">
              <img class="project-img" src="https://i.imgur.com/sUOzvmj.png" />
              <p class="project-title" id="project-tile">Technical Documentation</p>
            </a>
          </div>
          <div class="project p4">
            <a href="https://product-landing-page.freecodecamp.rocks/">
              <img class="project-img" src="https://i.imgur.com/CsZQDcy.png" />
              <p class="project-title" id="project-tile">Product Landing Page</p>
            </a>
          </div>
        </div>
      </div>
    </section>
    <section id="contact">
      <h1 class="headers contacth">Contact
      </h1>
      <div class="contact-links">
        <p class="clc">
          <a href="https://www.freecodecamp.org/" class="clc">freeCodeCamp</a>
        </p>
      </div>
      <div class="contact-links">
        <p class="clc">
          <a href="https://github.com/freecodecamp" class="clc">GitHub</a>
        </p>
      </div>
      <div class="contact-links">
        <p class="clc">
          <a href="mailto:example@example.com" class="clc">E-mail</a>
        </p>
      </div>
      <div class="contact-links">
        <p class="clc">
          <a href="tel:555-555-5555" class="clc">Phone Number</a>
        </p>
      </div>
    </section>
  </body>
</html>

* {
  background-color: #000;
  color: #FFF;
  font-family: verdana;
}

#welcome-section {
  height: 100vh;
  background-color: #008;
  margin-top: -50;
}

#work {
  height: 100vh;
  background-color: #0f0;
}

body {
  margin: 0;
  margin-top: 50;
}

header {
  background-color: #888;
  width: 100%;
  height: 50px;
  display: flex;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  justify-content: space-between;
  align-items: center;
}

li, ul, #navlink {
  background-color: #888;
}

#contact {
  height: 100vh;
  background-color: #800;
}

nav > ul {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
  align-items: center;
  padding-inline-start: 0;
  margin-block: 0;
  height: 100%;
}

nav > ul > li {
  margin: 0 0.2rem;
  padding: 0.2rem;
  display: block;
}

nav {
  width: 100%;
}

.headers {
  padding: 0;
  margin: 0 auto;
  align-items: center;
  text-align: center;
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  font-weight: normal;
}

.subheaders {
  padding: 0;
  margin: 0 auto;
  align-items: center;
  text-align: center;
  background-color: rgba(0, 0, 0, 0);
  position: relative;
  font-weight: normal;
  font-size: 17;
}

.welcomeh {
  top: 46%;
}

.welcomesh {
  top: 46.5%;
}

 .workh {
   top: 10%;
   z-index: 1;
 }

.contacth {
  top: 30%;
}

.project-img {
  background-color: #060;
  width: 100%;
}

.projects {
  display: grid;
  background-color: pink;
  grid-template-columns: 35% 35%;
  border-radius: 100px;
  justify-content: center;
  grid-template-rows: 35% 35%;
  gap: 50px;
  max-height: 79vh;
}

.projects-container {
  top: 16%;
  position: relative;
  height: 80vh;
}

.project {
  background-color: #060;
}

.project-title {
  text-align: center;
  background-color: #060;
}

.contact-links {
  text-align: center;
  position: relative;
  top: 33%;
}

.clc {
  background-color: #800;
}

.project a {
  background-color: #060;
}

/* @media screen and (min-width: 1000px) {
   .projects {
     grid-template-columns: 1000% 1000% 1000% 1000%;
     top: 30%;
   }
   .workh {
     top: 17%;
   }
 } 

 @media screen and (max-width: 500px) {
   .projects {
     grid-template-columns: 70%;
     gap: 10px;
     
   }
   .project {
     
   }
 }
/*

My browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:126.0) Gecko/20100101 Firefox/126.0

2
  • is there any reason for keeping them to “35%”?
...
grid-template-columns: 35% 35%;
grid-template-rows: 35% 35%;
...
  • this problem will go away if you make them “auto” instead

happy coding :slight_smile:

3

thank you for the reply. the problem, tragically, does not go away when the 35%'s are set to auto. it actually gets worse, technically, since when the a’s are bigger they overflow sooner.

it’s probably not relevant anymore why exactly they are 35 since changing them to auto did not fix the problem, but in case it is, the reason is just that that size looked nice on aspect ratios it was able to fit in. it also worked out with the gap and centering. worked out the best when things were working as intended.

4

could you share a “live link” such as in “repl/codepen/ or similar” environment with this reproduce-able code? thanks and happy coding :slight_smile:

5

Got severely burnt out. Three months later, here you are.

6

I would try an auto grid. It usually works pretty well for standard element grids.

You can adjust the container size in combination with the min column size to get different max column counts.

Example:

.projects-container {
  width: min(85%, 980px);
  margin-inline: auto;
  padding: 2rem;
}

.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  justify-content: center;
  gap: 2rem;
}