Dawn Product Grid - Alignment

Shopify Discussion

Topic summary

A user encountered product grid alignment issues on mobile for the Dawn Shopify theme. Specifically, product images, titles, prices, and buy buttons were not centered, and long titles weren’t truncating with ellipses (though these features worked correctly on desktop).

Resolution:
The issue was self-resolved by adding custom CSS to the component card stylesheet. The solution included:

  • Flexbox layout for 2-column grid on mobile (max-width: 749px)
  • Centered alignment for product card elements
  • Proper spacing adjustments with padding and margins
  • Column-based flex direction for card components

Another user requested screenshots for troubleshooting, but the original poster had already implemented the fix before providing them.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.
1

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.

2

Hi @Amy200101 , please share screenshot of your product.

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