Making div width responsive when at a certain screen width - html

Question

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>

Answer 1

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>

Answer 2

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