How to reduce Dawn's heading/title's font size on pages and product pages

Hello,

I just switched to using Dawn. I really cannot stand how big the titles/headings are on the collection pages, product pages, or regular pages. I’ve poked around in the code but can’t seem to figure out how to reduce the size of the font and consistency in the placement of the titles and margins across all pages.

I also want to center the headings on all the pages.

Is there a solution to these things?!

Thanks!

https://nanu-studio.myshopify.com/

1 Like

Hello there,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
h1.collection-hero__title {
font-size: 30px;
}

.rich-text.color-background-1.gradient.rich-text--full-width h2.h1 {
font-size: 30px;
}
4 Likes

Awesome! Thank you! Question: is there a way to have the collection headings centered verses left justified? I want it to match the Wholesale, Illustration, Contact, About pages and i used the theme page templates to make that.

1 Like

@ZestardTech How do you match the font size of the page titles for the other pages? This seems to only change for Collection Pages but not something like “Terms of Service”, “Privacy Policy”, or other Shopify pages.

yes in my theme also pages title size don’t change can any buddy help us to reduce size of pages as well

Doesn’t do anything.

For everyone else OR if the original solution no longer works:

You need to change what your theme defaults it’s h1 (Heading 1) size to. This is what is used to determine the “Product Title” font size.

I didn’t look to see what the “Terms of Service” heading is, however, if it didn’t work by changing h1 you would change it the same way by looking for h2, or h3, etc. and changing the “rem” number.

"h1,
.h1 {
font-size: calc(var(–font-heading-scale) * 3rem); //Change The Number To Something Smaller
}

@media only screen and (min-width: 750px) {
h1,
.h1 {
font-size: calc(var(–font-heading-scale) * 3rem); //Change The Number To Something Smaller
}
}

h2, // You Can Also Change Other Heading Sizes
.h2 {
font-size: calc(var(–font-heading-scale) * 2.5rem);
}

@media only screen and (min-width: 750px) {
h2,
.h2 {
font-size: calc(var(–font-heading-scale) * 2.5rem);"

1 Like

Check my reply to OP :slightly_smiling_face: Hope it helps!