How to decrease main page title across all pages? - Dawn theme

Store Design
,

Topic summary

A user wants to standardize the main page title font size across all pages in their Dawn theme Shopify store, matching the size of “Recent Release” on their homepage.

Solutions Provided:

Multiple CSS approaches were suggested, added to base.css:

  • Initial attempts targeted .header__heading-logo with max-width: 80%, but this didn’t address all page titles
  • A more comprehensive solution used media queries to adjust h1, .h1 elements: font-size: calc(var(--font-heading-scale) * 2.4rem)
  • This worked for policy links and collection pages but failed for footer menu pages (Contact, Sizing & Authentication, About)
  • An additional CSS snippet targeting .h0 class was provided to address remaining pages
  • Alternative suggestion included checking Typography settings in Theme Settings before applying custom CSS

Current Status:

The issue appears partially resolved. The user successfully reduced font sizes on some pages but still needed additional code for footer menu pages. Screenshots were shared showing the inconsistent sizing across different page types.

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

How do I decrease main page title font size across all pages and policy links so every title on my store is the same font size?

I Would like the font size to be the same as " Recent Release" on my main page.

I have tried using accepted solutions from past threads but none seem to work for me.

Thanks!

URL - pre-face.com

Password - hairso

2

Hello @Pre-face4000
Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

.header__heading-logo {
max-width: 80%;
}

result

41.png
41.png976×607 484 KB

If this was helpful, hit the like button and accept the solution.
Thanks

3

Hey, Rahul

thanks for the quick reply.

This didn’t work for me. I would like all other page titles to be the same as the image you sent.

Thank you!

Screenshot 2025-03-19 at 8.31.53 PM.png
Screenshot 2025-03-19 at 8.31.53 PM.png3420×2214 1.2 MB

Screenshot 2025-03-19 at 8.31.40 PM.png
Screenshot 2025-03-19 at 8.31.40 PM.png3420×2214 344 KB

4 
.header__heading-logo {
max-width: 80%;
}

hey @Pre-face4000
first open the shopify admin page then go to online store then open the customization and then you can see the top of the right side defualt pages option just open it then you can see collection pages simple open the collection pages and find the main collection section and the open it and place the code in custom css and then your problem is solved
if this code work please do not forget to like and mark it solution

5

Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media only screen and (min-width: 750px) {
h1, .h1 {
font-size: calc(var(--font-heading-scale) * 2.4rem);
}
}

result

42.png
42.png641×327 17.9 KB

Thanks

6

hey @GTLOfficial

Thanks for that!

Im still having some problems…

This worked for policy links and collection pages but did not work for any of the pages in my footer menu such as contact, sizing & authentication or my “about” page

Screenshot 2025-03-19 at 8.16.41 PM.png
Screenshot 2025-03-19 at 8.16.41 PM.png3420×2214 225 KB

7

Go to online store ----> themes ----> actions ----> edit code ----> base.css
add this code at the end of the file and save.

@media only screen and (min-width: 750px) {
.h0 {
font-size: calc(var(--font-heading-scale) * 2.4rem);
}
}

result

43.png
43.png805×281 14.1 KB

Thanks

8

Hi @Pre-face4000

Go to Online Store > Themes > Customize. Click Theme settings (bottom left) > Typography and check if there’s an option to adjust heading sizes. If not, follow the next steps. Go to Edit Code (under “Actions” in Themes). Open base.css or theme.css (depending on your theme version).

Add this code at the bottom:

h1, .page-title {
font-size: 24px !important; /* Adjust size as needed */
}