Making div width responsive when at a certain screen width

user_19180086 0
Viewed 66

Okay so, for a school assignment I have to make these blocks responsive and changing rows when on a certain screen width, above 1024px they have to be 2 rows going horizontally, and below 1024px 2 rows going vertically, always spelling out 'LOI'. Now when at 660px, the blocks dont get smaller, they fall out of the screen. Is there a way to make them gradually get smaller when the screen width is at say 660px? Thanks in advance!

main {
  max-width: 1024px;
  margin: auto;
}

.blokken {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 1200px;
  align-content: center;
  max-width: 100%;
  justify-content: center;
}

@media screen and (min-width: 1024px) {
  .blokken {
    flex-direction: row;
  }
}

.letter {
  width: 300px;
  height: 300px;
  margin: 5px;
  background-color: #eee;
  border: 5px solid black;
  font-family: sans-serif;
  font-size: 5em;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  overflow: hidden;
}
<main>
  <h2 id="letterblokjes">Letterblokjes</h2>
  <div class="blokken">
    <div class="letter">L</div>
    <div class="letter">O</div>
    <div class="letter">I</div>
    <div class="letter">L</div>
    <div class="letter">O</div>
    <div class="letter">I</div>
  </div>
</main>

flexbox css html
2 Answers

You can try using a dynamic calculated max-width instead of a static 300px width.

@media only screen and (max-width: 800px) {
   .letter {
    max-width: calc(100%/2 - 10px); /* -10 px accounts for margin: 5px; */
   }
}

See it working here:

main {
  max-width: 1024px;
  margin: auto;
}

.blokken {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 1200px;
  align-content: center;
  max-width: 100%;
  justify-content: center;
}

@media screen and (min-width: 1024px) {
  .blokken {
    flex-direction: row;
  }
}

.letter {
  width: 300px;
  height: 300px;
  margin: 5px;
  background-color: #eee;
  border: 5px solid black;
  font-family: sans-serif;
  font-size: 5em;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  overflow: hidden;
}

@media only screen and (max-width: 800px) {
   .letter {
    max-width: calc(100%/2 - 10px); /* -10 px accounts for margin: 5px; */
   }
}
<main>
  <h2 id="letterblokjes">Letterblokjes</h2>
  <div class="blokken">
    <div class="letter">L</div>
    <div class="letter">O</div>
    <div class="letter">I</div>
    <div class="letter">L</div>
    <div class="letter">O</div>
    <div class="letter">I</div>
  </div>
</main>

user_164963570

You can use another @media to set your width to a percentage when you're at 660px:

    main {
  max-width: 1024px;
  margin: auto;
}

.blokken {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  max-height: 1200px;
  align-content: center;
  max-width: 100%;
  justify-content: center;
}

.letter {
  width: 300px;
  height: 300px;
  margin: 5px;
  background-color: #eee;
  border: 5px solid black;
  font-family: sans-serif;
  font-size: 5em;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  .blokken {
    flex-direction: row;
  }
}

@media screen and (max-width: 660px){
    
  .letter{
      width : 48%;
  }
}

EDIT : now your blocks are square and getting smaller with less space

 main {
  max-width: 1024px;
  margin : auto;
}

.blokken {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height:1200px;
  align-content: center;
  max-width: 100%;
  justify-content: center;
}

.letter {
  width: 300px;
  height: 300px;
  margin: 5px;
  background-color: #eee;
  border: 5px solid black;
  font-family: sans-serif;
  font-size: 100px;
  color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 25%;
  overflow: hidden;
}

@media screen and (min-width: 1024px) {
  .blokken {
    flex-direction: row;
  }
}


@media screen and (max-width: 660px){
    .blokken{
        height : 160vw;
    }
  .letter{
      width : 40vw;
      height : 40vw;
  }
}

I changed the letter proportion to vw as it's responsive, allowing them to stay square on any small screen

I also changed the height of blokken for the letter to always stay packed by putting the unit to vw on under 660px wide screen

user_190751350
Related