How can I adjust product title size for mobile and desktop on Dawn 10.0 theme?

Store Design
, ,
1

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!

2

Hi @MalekiB ,

What’s your store url?

1 Like
3

This is the product page I’m working on:

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

4

Hey @MalekiB ,

Try this in the custom css

.product__title h1 {
    font-size: clamp(20px, 2vw, 31px) !important;
}
1 Like
5

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?

6

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.

1 Like
7

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)

1 Like