It looks like your cards have a fixed width, a layout grid shrinks its content to the minimum possible size. When giving a fixed width to elements, this minimum size increases, so it won’t look good on smaller screens.
You could use a flex layout to determine how many cards can fit in a row. This way, the screen size doesn’t matter because the cards will always fill the container based on the screen width.
You can achieve this by following these steps:
.card-grid {
ul {
display: flex;
flex-wrap: wrap;
li {
width: 100%;
max-width: 250px;
padding: 8px;
}
}
}
The max-width and padding of the ‘li’ can be anything you want, based on your preferences of the width of the card and space between the cards.
Hope this helps!