Dawn Product Grid - Alignment

Shopify Discussion
3

I fixed this by putting this code in my component card css.

@media screen and (max-width: 749px) {
.grid--2-col {
display: flex;
flex-wrap: wrap;
margin-left: -8px; /* Compensate for padding */
margin-right: -8px;
}

.grid--2-col .grid__item {
width: 50%;
padding: 0 8px 16px; /* Add horizontal spacing and bottom gap */
box-sizing: border-box;
}

.product-card-wrapper,
.card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 100%;
}

.card__media,
.card__information,
.card__content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}

.card__heading,
.card-information {
text-align: center;
width: 80%;
}
}