Solved

Product Title Sizing - Dawn 10.0 Theme

MalekiB
Tourist
6 0 3

Hi there, I'm trying to work on my product titles as I noticed it extends over 4 lines on most mobile devices whereas it is only 3 lines on desktop and larger mobile devices.

 

I found the CSS selector and was able to change my font size by adding this to my base.css file:

.product__title h1 {
font-size: 36px;
}

 

However, it seems I am missing something, as when I make it 36px, it get's significantly smaller on desktop and much much larger on mobile and then goes over 5 lines. If I use a low enough PX size, it looks good on mobile but terrible on desktop as it is far too small. I tried using EM too, but my coding knowledge is very basic and I seemed to have the same problem.

 

Can someone please help? What do I need to do to make it smaller on mobile but still keep it proportional on desktop. Thanks in advance!

Accepted Solution (1)

ThePrimeWeb
Shopify Partner
1172 305 232

This is an accepted solution.

Hey @MalekiB,

Try this in the custom css

.product__title h1 {
    font-size: clamp(20px, 2vw, 31px) !important;
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website

View solution in original post

Replies 6 (6)

Farouk-dev
Shopify Partner
146 24 27

Hi @MalekiB,

What's your store url?

If this message was helpful, please mark it as a solution and give it a thumbs up. For more theme customisations, just send me an email at kadduf6@gmail.com
MalekiB
Tourist
6 0 3

This is the product page I'm working on:

https://snootifulhound.co.uk/products/sighthound-no-escape-harness 

ThePrimeWeb
Shopify Partner
1172 305 232

This is an accepted solution.

Hey @MalekiB,

Try this in the custom css

.product__title h1 {
    font-size: clamp(20px, 2vw, 31px) !important;
}
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
MalekiB
Tourist
6 0 3

Wow, this works perfectly, thank you! 

 

Just so I'm understanding correctly, it seems the first px changes mobile size, and the second changes desktop? Is that about right?

Farouk-dev
Shopify Partner
146 24 27

Hi @MalekiB,

Another solution if you want to make changes to the product page only...

 

1. From your Admin Page, click Online Store > Themes >Actions > Edit code

2. In the Asset folder, open the section-main-product.css

3. Paste the code below at the very bottom of the file.

 

 

@media screen and (min-width: 750px){
  .product__info-container .product__title h1 {
    margin-top: 0;
   font-size: 35px !important;
}
}

 

 

Let me know if you have any other questions.

If this message was helpful, please mark it as a solution and give it a thumbs up. For more theme customisations, just send me an email at kadduf6@gmail.com
ThePrimeWeb
Shopify Partner
1172 305 232

The first is minimum, the middle one is preferred, and the last is maximum. The middle one has to be a relative unit (vw,vh, %, etc..), the first and last (min and max) can be fixed values (px, em)

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website