How can I reduce the size of a product title in Dawn theme?

Store Design
,
1

Hi,

I want to reduce the size of the product title. I’ve tried to paste the following code on the section-main-products.css and didn’t change anything. Also tried on the base.css and nothing happened.

@media only screen and (min-width: 750px){
h1.product__title { font-size: 3.2rem !important; }
}

Any idea how to do it? It looks this big:

tigas31_0-1677537978865.png
tigas31_0-1677537978865.png1336×493 300 KB

2

@tigas31

This is Victor from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-products.css->paste below code at the bottom of the file:

@media only screen and (min-width: 750px){
.product__title > h1 { font-size: 3.2rem !important; }
}

Hope my answer will help you.

Best regards,

Victor | PageFly

3

Hi,

@PageFly-Victor as explained in my question, I’ve used that same code and nothing changed.

4

@tigas31 ,

Please try using my code. I wrote: “.product__title > h1” instead of “h1.product__title”

5

Hello @tigas31 ,

You can try this code

@media (min-width: 768px ) {
        h1.product__title { font-size: 3.2rem !important; }
      }

If not work, you can send me your Store URL( with pass if your store password is enabled) so I can check it for you?

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

6

Hello @tigas31 ,

You can use this code

@media (min-width: 768px ) {
        .product__title > h1 { font-size: 3.2rem !important; }
      }

I hope the above is useful to you.

Kind & Best regards,
GemPages Support Team

7

@PageFly-Victor @GemPages this one worked:

@media only screen and (min-width: 750px){
.product__title > h1 { font-size: 2rem !important; }
}

But I’ve noticed that these changes were only applied to the desktop version. On the mobile version the title size didn’t change. How do I change it?

Thank you,

8

@tigas31 ,

You can remove media query to do that. Just add:

.product__title > h1 { font-size: 2rem !important; }
}
1 Like