How can I alter the CSS font size in the Dawn Theme?

Store Design
1

Hello! I need to adjust the “H4” and the “Paragraph” font size so the tabs and the product description on my product pages are not so large. Which code page do I edit to accomplish this?

Link to my website:

https://www.wearjsd.com/products/back-cut-out-jumpsuit

2

@JKen808

Please share the screenshot of what you want.

Thanks!

3

Hi @JKen808 ,

Glad to support you today.

To can reduce the text font-size on product description, you can check out my suggestion below to make it:

  1. Go to Edit code on Online Store:

GemPages_0-1673322676109.png
GemPages_0-1673322676109.png400×162 25.3 KB

  1. add my code above the tag on Theme.liquid:

*Note: You can replace the numbers 14 and 13 with another number you want to reduce font size.

I hope you find the answer helpful.

Kind & Best regards,
GemPages Support Team.

4

Hi @JKen808 ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

.station-tabs:not([data-station-tabs]) .station-tabs-content-inner {
    font-size: 1.2rem;
}

you can also change the number to your liking, it will display fine

5

Hi @JKen808

For your case, you can follow the following steps:

  • Go to Online Store → Theme → Edit code → base.css and paste this code at the end of the file:
.product__description .station-tabs .station-tabs-link {
        font-size: 15px;
    }
    .product__description .station-tabs:not([data-station-tabs]) .station-tabs-content-inner {
        font-size: 14px;
    }

And you can change “font-size” as you want.

I hope you find my answer helpful!

6

Thank you! This fixed the problem :slightly_smiling_face:

Have a great day