How to change Product Title Header to a different Header Size for Dawn Theme

Store Design
1

Hello,

Can anyone help with this: I would like to change the product title to a smaller header title so the text fits onto one line for mobile devices. See attachment image: The product title is on 2 lines because of its size.

Thanks

Screenshot Product Header.PNG
Screenshot Product Header.PNG490×623 30.7 KB

2

Hi @SavvyBrothers ,

Can you give me your page URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

3

@SavvyBrothers

Hi,

For Dawn theme, to change the product title, please follow the steps below.

Go to Edit code > Assets > base.css file.

At the bottom of the file, add the code below.

@media only screen and (min-width: 750px) {
  div.product__title>h1 {
    font-size: 36px;
  }
}
@media only screen and (max-width: 749px) {
  div.product__title>h1 {
    font-size: 32px;
  }
}

The top font size (36px) is for PC and the bottom font size (32px) is for mobile.

Please change the font size to fit your needs.

Hope it helps.

Thanks.

4

Hello David,

Thanks for replying back, I attempted to post the code as instructed but there was no change at all on the mobile. I made it 5 px

Screenshot Product Header2.PNG
Screenshot Product Header2.PNG1481×687 49.6 KB

5

If it doesn’t change the font size, you can force it to change with !important as below.

@media only screen and (min-width: 750px) {
  div.product__title>h1 {
    font-size: 36px !important;
  }
}
@media only screen and (max-width: 749px) {
  div.product__title>h1 {
    font-size: 24px !important;
  }
}

Hope it helps.

Thanks.