cssflexboxmedia-queriesoverflowcss-grid

How to solve content overflow issues when you have too many items and why is media queries not working?

As I am experimenting with media queries, flex, and grid, I faced two issues.

The overflow issue I search all over stack overflow for the related issues, but does not solve my problem. when I make each class =year section pile on top on each other by changing display to block or to have less column. Instead of pushing the content below down, it just appears behind the next section. However, with the portfolio section, it does not have any overflow issues. I have to adjust margin on the year section every time for every media queries. Is there an easier way to solve this issue?

media queries issue This happen again with the experiment section. When it is at monitor/3800px size, i change .timeline width to 70%. After I did this, when i change .timeline width to 90% when screens is at 2800px, it is not changing(see pic 1). I thought the latter should replace the former? However, if i did nothing at 3800px(.year is spread out, see pics 4), and I change .timeline 2800px width to 90% it work(see pics 3).

Also I realize the placement of the media queries matters. If I change the section below, If I write 2800px after the 3800px, opposite happen. What is going on here, and how do i fix this issue?

ideally, i wanted it to look like pics 2 when it is at monior size and pics 3 when it is a macpro size.

macpro screen

monitor screen

macpro screen

monior screen

/*experience*/

.experience {
  height: 100vh;
}

.timeline img {
  height: 50px;
}

.timeline {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  margin: auto;
}

.year {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.date {
  text-align: center;
  font-size: 50px;
  color: white;
  width: 280px;
  font-family: "Montserrat", sans-serif;
}

.time-content {
  margin-top: 400px;
  width: 250px;
  padding: 20px;
  border-radius: 25px;
  font-family: "Montserrat", sans-serif;
}

.date::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 100%;
  margin-top: 60px;
  margin-left: -50px;
  height: 400px;
  z-index: -1;
}

.year:nth-child(even) .date::after {
  height: 100px;
}

.year:nth-child(even) .time-content {
  margin-top: 100px;
}

.orange,
.orange::after {
  background: rgba(247, 138, 55, 255);
}

.green,
.green::after {
  background: #82a443;
}

.pink,
.pink::after {
  background: #e5567f;
}

.lightblue,
.lightblue::after {
  background: #43c3d0;
}

.yellow,
.yellow::after {
  background: #e9c43b;
}


/*portfolio*/

.portfolio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  row-gap: 20px;
}

.pimg {
  display: flex;
  justify-content: center;
}

.section {
  border-radius: 25px;
  background-color: #e5eefa;
  font-family: "Montserrat", sans-serif;
}

.subtitle {
  background-color: white;
  border-radius: 15px;
  padding: 15px;
  margin: 30px;
}

.section img {
  border-radius: 25px;
}

.innerimg {
  background-color: #d4e1f1;
  padding: 20px;
  border-radius: 20px;
  margin: 30px;
}

.boxdecor {
  background-color: #dfeaf9;
  margin-bottom: 20px;
  height: 70px;
  border-top-right-radius: 25px;
  border-top-left-radius: 25px;
}

.section h3 {
  margin-top: 0;
  font-family: "Montserrat", sans-serif;
  padding-top: 20px;
  padding-left: 30px;
  font-size: 30px;
  color: black;
  letter-spacing: 3px;
}

.section a {
  text-decoration: none;
  color: black;
}

a:hover {
  opacity: 0.5;
}


/* ***** media queries ****** */

@media (max-width: 800px) {
  .timeline {
    display: block;
  }
  .year .date {
    width: 90%;
  }
  .year .time-content {
    width: 90%;
  }
  .year {
    margin-top: 100px;
  }
  .experience {
    padding-bottom: 1200px;
  }
}


/*Small Screens, Ipads*/

@media (max-width: 1024px) {
  /*nav*/
  .ownnav ul {
    justify-content: center;
    gap: 30px;
  }
  /*introduction section*/
  .intro {
    display: block;
  }
  .intro h2 {
    margin-left: 10px;
  }
  .intro h1 {
    margin-top: 60px;
    margin-right: 100px;
  }
  .intro .img img {
    height: 300px;
  }
  /*experience*/
  .timeline {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .experience {
    margin-bottom: 800px;
  }
  .portfolio {
    display: block;
  }
  .year:nth-child(odd) .date::after {
    height: 100px;
  }
  .year:nth-child(odd) .time-content {
    margin-top: 100px;
  }
  .pimg {
    margin-top: 50px;
  }
  /*contact me section*/
  .contact {
    display: block;
  }
  .contact .pheader {
    font-size: 50px;
    margin-right: 100px;
  }
  .contact h3 {
    margin-right: 50px;
  }
}


/*Macbook Pro */

@media (max-width: 2800px) {
  /*introduction section*/
  .intro h1 {
    font-size: 80px;
  }
  .intro h1 img {
    height: 100px;
  }
  .intro h2 {
    font-size: 30px;
  }
  /*timeline section*/
  .timeline {
    width: 90%;
  }
  .date {
    width: 250px;
  }
  .time-content {
    width: 200px;
    margin-top: 250px;
    font-size: 15px;
  }
  .date::after {
    content: '';
    position: absolute;
    margin-top: 60px;
    margin-left: -50px;
    height: 300px;
  }
  .year:nth-child(even) .date::after {
    height: 100px;
  }
  .year:nth-child(even) .time-content {
    margin-top: 100px;
  }
  .date {
    text-align: center;
  }
  /* portfolio section */
  #portfolio {
    margin-top: 150px;
  }
}


/*monitor*/

@media (max-width: 3800px) {
  .timeline {
    width: 70%;
  }
}
<div class="experience">
  <h2 class="pheader">Experience</h2>
  <div class="timeline">
    <div class="year">
      <div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
      <div class="date orange">2017</div>
      <div class="time-content orange">
        <h3>Title</h3>
        <p> some text
        </p>
      </div>
    </div>

    <div class="year">
      <div class="time-graphic"><img src="img/school.png" alt="school"></div>
      <div class="date green">2020</div>
      <div class="time-content green">
        <h3>Title</h3>
        <p>Some Text
        </p>
      </div>
    </div>

    <div class="year">
      <div class="time-graphic"><img src="img/work.png" alt="briefcase"></div>
      <div class="date pink">2022</div>
      <div class="time-content pink">
        <h3>Titel</h3>
        <p>Some text
        </p>
      </div>
    </div>

    <div class="year">
      <div class="time-graphic"><img src="img/question.png" alt="question mark"></div>
      <div class="date lightblue">2023</div>
      <div class="time-content lightblue">
        <h3>Title</h3>
        <p>
          some text
        </p>
      </div>
    </div>

    <div class="year">
      <div class="time-graphic"><img src="img/labtop.png" alt="laptop"></div>
      <div class="date yellow">2024</div>
      <div class="time-content yellow">
        <h3>Title</h3>
        <p>Some Text
        </p>
      </div>
    </div>
  </div>
</div>
<h2 class="pheader" id="portfolio">Portfolio</h2>
<div class="portfolio">
  <div class="pimg">
    <div class="section">
      <a href="../Mini Projects/7.3 CSS Flag Project/index.html" target="_blank">
        <div class="boxdecor">
          <h3>Flag of Laos</h3>
        </div>
        <div class="innerimg"><img src="img/flag.png" alt="flag of laos" height="400px" width="500px"></div>
        <p class="subtitle">Used relative and absolute position to create a Flag of Laos</p>
      </a>
    </div>
  </div>
  <div class="pimg">
    <div class="section">
      <a href="../Mini Projects/10.3 Mondrian Project/index.html" target="_blank">
        <div class="boxdecor">
          <h3>Mondrian Painting</h3>
        </div>
        <div class="innerimg"><img src="img/painting.png" alt="mondrian project" height="400px" width="500px"></div>
        <p class="subtitle">Used grid responsive design to create a Mondrian Painting</p>
      </a>
    </div>
  </div>
  <div class="pimg">
    <div class="section">
      <a href="../Mini Projects/9.4 Flexbox Pricing Table Project/index.html" target="_blank">
        <div class="boxdecor">
          <h3>Pricing Table</h3>
        </div>
        <div class="innerimg"><img src="img/pricingtable.png" alt="pricing table" height="400px" width="500px"></div>
        <p class="subtitle">Used Flexbox responsive design to create a Pricing Table </p>
      </a>
    </div>
  </div>
  <div class="pimg">
    <div class="section">
      <a href="../Mini Projects/11.3 TinDog Project/index.html" target="_blank">
        <div class="boxdecor">
          <h3>Dog Tinder</h3>
        </div>
        <div class="innerimg"><img src="img/tinydog.png" alt="dog" height="400px" width="500px"></div>
        <p class="subtitle">Used Bootstrap to create a website about Dog Tinder</p>
      </a>
    </div>
  </div>
</div>

Solution

  • flex and flex-wrap can avoid a few mediaquerie, then grid can indeed be usefull :) for the cards layout.

    mediaquerie can also then be reduced.

    here is an example to inspire you untill more answsers come along.

    .timeline {
  display:flex;
  flex-wrap:wrap;
  gap : 2vw;
  justify-content:center;
}
.year {
  display:grid;
  width:clamp( 280px, 16vw, 400px);
  grid-template-rows: auto auto clamp(50px, 30vmin, 150px) 1fr;
}
.year:nth-child(even) {  
  grid-template-rows: auto auto clamp(30px, 10vmin, 100px) 1fr;  
}
.year::before {
  content:'';
  padding:2px;
  margin:auto;
  grid-row:3;
  display:block;
  height:100%;
}
.time-graphic  {
  margin:auto;
  grid-row:1
}

.date {
  grid-row:2;
  font-size:clamp(26px,4vw ,40px);
  color:white;
  padding:0 1rem;
  /*margin:auto; instead next rule ?*/
  text-align:center;
  border-radius:5px;
}
.time-content {
  grid-row:4;
  border-radius:5px;
  padding:1em;
  margin-bottom:auto;
}


@media (max-width:650px){
  .year {
  grid-template-rows: auto auto 50px 1fr;
}
  .time-content {
  margin-bottom:0;
}
}



.orange,
.orange::after ,
.year:nth-child(1)::before {
  background: rgba(247, 138, 55, 255);
}

.green,
.green::after,
.year:nth-child(2)::before {
  background: #82a443;
}

.pink,
.pink::after,
.year:nth-child(3)::before {
  background: #e5567f;
}

.lightblue,
.lightblue::after,
.year:nth-child(4)::before {
  background: #43c3d0;
}

.yellow,
.yellow::after,
.year:nth-child(5)::before {
  background: #e9c43b;
}
    <div class="experience">
  <h2 class="pheader">Experience</h2>
  <div class="timeline">
    <div class="year">
      <div class="time-graphic"><img src="img/twopeople-removebg-preview.png" alt="two people"></div>
      <div class="date orange">2017</div>
      <div class="time-content orange">
        <h3>Title</h3>
        <p> some text
        </p>
      </div>
    </div>

    <div class="year">
      <div class="time-graphic"><img src="img/school.png" alt="school"></div>
      <div class="date green">2020</div>
      <div class="time-content green">
        <h3>Title</h3>
        <p>Some Text
        </p>
      </div>
    </div>

    <div class="year">
      <div class="time-graphic"><img src="img/work.png" alt="briefcase"></div>
      <div class="date pink">2022</div>
      <div class="time-content pink">
        <h3>Titel</h3>
        <p>Some text
        </p>
      </div>
    </div>

    <div class="year">
      <div class="time-graphic"><img src="img/question.png" alt="question mark"></div>
      <div class="date lightblue">2023</div>
      <div class="time-content lightblue">
        <h3>Title</h3>
        <p>
          some text
        </p>
      </div>
    </div>

    <div class="year">
      <div class="time-graphic"><img src="img/labtop.png" alt="laptop"></div>
      <div class="date yellow">2024</div>
      <div class="time-content yellow">
        <h3>Title</h3>
        <p>Some Text
        </p>
      </div>
    </div>
  </div>
</div>