How to center and reduce size on headings on Pages added to menu in footer

Shopify Discussion

Topic summary

Issue: Headings on custom Pages (About us, FAQ) in the footer of Dawn v15 are larger and left-aligned compared to policy pages. Request to center and reduce size to match policy pages.

Actions taken:

  • Access provided (store URL and password) for review.
  • Fix option 1: Inline CSS added in theme.liquid before targeting h1.main-page-title.page-title.h0.scroll-trigger.animate–fade-in, setting font-size: calc(var(–font-heading-scale) * 4rem) and text-align: center. Screenshots included.
  • Fix option 2: Added CSS in main.css (or base/style/theme.css): h1.main-page-title.page-title { text-align: center; }. Result screenshot provided.

Outcome:

  • Centering confirmed working by the requester.

Open items:

  • Font size still appears larger than on policy pages. The requester asks where the policy pages’ heading font size is defined and whether they can adjust a “40px” value to match. One provided snippet uses calc(var(–font-heading-scale) * 4rem), not 40px.

Status: Partially resolved. Centering is solved; matching the exact policy page heading size remains unanswered and needs guidance on the correct selector/variable/value in Dawn.

Summarized with AI on December 19. AI used: gpt-5.
4

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in{ font-size: calc(var(--font-heading-scale) * 4rem) !important; text-align: center !important; }

Tech_Coding_0-1726825653887.png
Tech_Coding_0-1726825653887.png1107×190 7.73 KB

Tech_Coding_1-1726825725085.png
Tech_Coding_1-1726825725085.png1111×357 26.1 KB

my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.