Dawn Product Grid - Alignment

[Amy200101]

Hey,

Could someone please help with my product alignment for Dawn on mobile. My product grid on mobile isn't centred at all.

I want the image, title, £ and buy button to be centered with each other. And also if the title exceeds the view to have ... on the end. This all works on desktop.

https://www.supplieswarehouse.co.uk/

Thanks.

[topnewyork]

Hi @Amy200101  , please share screenshot of your product.

[Amy200101 · Accepted solution]

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%;
}
}