In the .gallery section, there are 12 li elements that contain images. Originally, I used media queries to adjust the number of columns in the grid to 6, 4, 3, and 2 based on the browser width. However, when I tried to create a size ratio of 2:1 for all li elements with varied image sizes, the media queries for .gallery stopped working and I'm not sure why. You can view the code here: https://jsfiddle.net/0g87u1va/3/.
.gallery {
display: grid;
grid-gap: 0.75rem;
grid-auto-flow: dense;
padding: 40px;
list-style: none;
background: white;
width: 100%;
box-sizing: border-box;
margin: auto;
}
figure {
background-size: cover;
background-position: center center;
border: 1px solid red;
border-radius: 15px;
width: 100%;
padding-top: calc(84 / 168 * 100%);
margin: auto;
box-shadow: none;
}
@media screen and (min-width: 1000px) {
.gallery {
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: minmax(max-content, 2fr);
}
@media screen and (max-width: 505px) {
.gallery {
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: repeat(6, 5vw);
}
}
@media (min-width: 505px) and (max-width: 800px) {
.gallery {
grid-template-columns: repeat(3, 1fr);
grid-auto-rows: repeat(4, 5vw);
}
}
@media (min-width: 800px) and (max-width: 1000px) {
.gallery {
grid-template-columns: repeat(4, 1fr);
grid-auto-rows: repeat(3, 5vw);
}
}
}