Shopify Community webinar alert! Getting ready for BFCM: Learn Flash Sale Logistics Shopify coming Tuesday, October 23 | 11am EDT |Learn more.

Change Heading and Subtitle font size on mobile Dawn theme

Solved
sanjivp27
Excursionist
15 0 4

I like the font size of my website when viewed from a laptop but when viewed on a phone the font size is way to big. Specifically, all of the titles and the subtitle text is very large. The body text looks fine. How do I change the font size of the title and subtitle text only in the mobile version, while keeping the desktop version the same as it currently is?

My website is sisubracelets.us

For context the home page is all title and subtitle text.

The paragraph under "Life in the Hoopa Valley" in the shop page is body text.

Accepted Solution (1)
ReturnPrime
Shopify Partner
412 58 99

This is an accepted solution.

Try bellow code.
Go to Online Store->Theme->Edit code->base.css->paste bellow code in bottom of file.

@media只有屏幕和(max-width: 680 px) { .banner__box > *:first-child { font-size: 3rem !important; } .subtitle { font-size: 2rem !important; } }

View solution in original post

Replies4(4)
DelightCart
Shopify Partner
1183 81 151

@sanjivp27

Could you provide me store URL? I should be able to answer your question.

Yours faithfully!

:high_voltage:Delight Cart- Automatic Bundles & Discounts.
:high_voltage:Delight Loyalty- Increase repeat sales quickly and build lifelong customers loyalty.
ReturnPrime
Shopify Partner
412 58 99

Hey@sanjivp27,
Welcome to the Shopify community!
You can follow the instruction below:
Go to Online Store->Theme->Edit code->base.css->paste bellow code in bottom of file.

@media只有屏幕和(max-width: 680 px) { .h0 { font-size: 5rem !important; } .subtitle { font-size: 2rem !important; } }


If you feel like my answer is helpful, pleaseLike and mark it as a solution.Let me know if you have any further questions.
Thank you!
Raman

sanjivp27
Excursionist
15 0 4

非常感谢你的帮助。然而,添加this code didn't seem to change anything. Any additional help will be appreciated.

store url: sisubracelets.us

ReturnPrime
Shopify Partner
412 58 99

This is an accepted solution.

Try bellow code.
Go to Online Store->Theme->Edit code->base.css->paste bellow code in bottom of file.

@media只有屏幕和(max-width: 680 px) { .banner__box > *:first-child { font-size: 3rem !important; } .subtitle { font-size: 2rem !important; } }