centre collection titles for collection list on mobile

Store Design
, ,

Topic summary

A user is experiencing an alignment issue where collection titles in their collection list appear centered on desktop but not fully centered on mobile. They are using the Dawn theme.

Proposed Solution:

Another user provided CSS code to fix the mobile centering issue:

  • Navigate to: Shopify Admin → Online Store → Theme → Edit Code → base.css
  • Add the following CSS at the end of the base.css file:
@media screen and (max-width: 768px) {
  .collection-list__item h3.card__heading {
    width: 100%;
  }
}

Status: The discussion remains open, awaiting confirmation whether the CSS solution resolves the mobile alignment problem.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

hello, I would like my collection titles for my collection list to be centered:

Screenshot 2024-12-11 at 17.13.27.png
Screenshot 2024-12-11 at 17.13.27.png1054×801 191 KB

the desktop version is fine, however, on the mobile version for some reason its not fully centered. My theme is dawn, website url is www.marcomontesi.com

2

@ads18922 - please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media screen and (max-width: 768px) {
li.collection-list__item h3.card__heading a {width: 100%;}
}