How to center align collection page text for mobile view on dawn theme?

Store Design

Topic summary

Main issue: On Shopify’s Dawn theme, the collection page body text on mobile wasn’t centered with the header. Prior attempts editing component-collection-hero.css and reducing mobile font size had no effect.

What was tried:

  • One suggestion: insert a centering snippet in theme.liquid above the tag (code not visible in the thread view). A screenshot showed centered results.
  • Working fix confirmed by the OP: edit assets/component-collection-hero.css around the .collection-hero__title + .collection-hero__description rule, ensuring text-align: center and proper closing braces. After this, the mobile body text aligned with the header.

Follow-up (font size on mobile):

  • Guidance provided to add CSS media queries in base.css (at the end of the file):
    • For screens max-width: 749px, target #shopify-section-template–…__banner p and h1 and set font-size (e.g., 14px for p, 20px for h1).
  • Media queries = CSS rules that apply only at specified screen widths (useful for mobile-specific styling).

Status: Center alignment is resolved. Mobile font sizing instructions were provided with example values; outcome appears addressed based on shared result screenshots.

Summarized with AI on December 25. AI used: gpt-5.
3

Hello @Verterra

Go to online store ---------> themes --------------> actions ------> edit code-------> search—> assets -----> component-collection-hero.css -----> line number 71
search this code

.collection-hero__title + .collection-hero__description {
font-size: 0.8rem !important;
text-align: center !important;
margin-top: 1rem;
margin-bottom: 1.5rem;
padding-left: 5 rem !important;
padding-right: 0 rem;
max-width: 100% !important;
}
}

and replace with this code.

.collection-hero__title + .collection-hero__description {
font-size: 0.8rem !important;
text-align: center !important;
margin-top: 1rem;
margin-bottom: 1.5rem;
padding-left: 5 rem !important;
padding-right: 0 rem;
max-width: 100% !important;
}
}

the result will be

18.png
18.png425×832 152 KB

If this was helpful, hit the like button and mark the job as completed.
Thanks

1 Like