My current issue involves the implementation of a "main" element with a "grid" display property. I have configured two different layouts for this grid based on the screen size, as seen in the code snippet below:
main {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-auto-rows: minmax(400px, auto);
align-items: stretch;
margin: 10px;
}
@media screen and (min-width:700px) {
main {
grid-template-columns: repeat(2, 1fr);
}
}
When the screen size exceeds 700 pixels, there should be 2 columns; otherwise, only 1 column is displayed. However, this setup does not work as intended, as evidenced by the screenshot shown below:
Image of the site at 600pxInterestingly, the layout functions correctly when the screen width is 400 pixels, but fails to do so at 700 pixels. I attempted using "max-width" instead of "min-width," but encountered the same issue where the site appears identical.
If anyone has insights into what might be causing this problem, I would greatly appreciate your assistance.