Conversation
darokrk
left a comment
There was a problem hiding this comment.
Small fix is required for approval :)
| display: grid; | ||
| justify-content: center; | ||
| gap: 48px; | ||
|
|
There was a problem hiding this comment.
"There should be one column below 488px" think you missed this requirement :)
just add here grid-template-columns: repeat(1, 200px);
There was a problem hiding this comment.
just thought this limit was not necessary as there was 1 column below 488px without this limit :)
darokrk
left a comment
There was a problem hiding this comment.
Nice 🥇 Give approval, but look at my last mention, test it by yourself and try to implement it :) it will improve code even more
|
|
||
| max-width: 944px; | ||
| margin: 0 auto; | ||
| grid-template-columns: repeat(1, 200px); |
There was a problem hiding this comment.
You can even try to use here 'grid-template-columns' to repeat(auto-fit, minmax(200px, 1fr)); to make the layout responsive and just leave only this breakpoint to make sure then you get max 4 columns.
@media all and (min-width: 1024px) { grid-template-columns: repeat(4, 200px); }
Then you can remove the rest breakpoints for the smaller screens.
min-width: 488px and min-width: 768px
No description provided.