FROM CACHE - en_header

Font Size Change

JonnyJonny21
Tourist
23 0 2

Hi!

 

I am using DAWN theme for my website. I wanted to ask if we change the font size between the desktop version and the mobile version. My text is looking big for Mobile version but looking fine on desktop.

My website is jonnyjonny.in

 

Any help would be appreciated!

 

Many thanks,

Parul

Replies 2 (2)
Ollie
Shopify Staff
Shopify Staff
1428 260 259

Hey @JonnyJonny21.

 

Thanks for reaching out.

 

I appreciate that you have let us know which theme you are using on your online store, that is very helpful! Looking into the Dawn theme, I noticed that we can change the font size on the online store using the Theme Editor. Once you navigate to the Theme Editor, you can select the theme settings to make changes to the typography.

 

With that being said, I did notice that changing the font size on the online store will affect the text size on the desktop and mobile versions of the theme. However, it is possible to make a change to the theme's coding to have the font size displayed differently than the desktop font size. Since the Dawn theme is designed and supported by Shopify, we can use free design time for Shopify themes to allow our internal team to make the changes on your behalf.

 

25-16-41613-12112

 

If you are interested in using the design time, you will need to login to your store using the Contact Us page. This will allow us to securely verify you as the store owner before speaking directly with a Support Advisor about the changes you would like to see.

 

Let me know if you have any questions.

Ollie | Social Care @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

Rohail_Ali_12
Shopify Partner
51 7 6

Hi @JonnyJonny21,

 

Yes, we can change the font size based on different screen sizes. All you need to do is add custom CSS breakpoints in your theme.css file.

 

Custom code for the tablet breakpoint looks like this:

@media only screen and (min-width: 650px) and (max-width: 850px){
/* Add your CSS */
}

 

You can use the code below to add a breakpoint for mobile devices:

@media only screen and (max-width: 640px){
/*Add your custom CSS*/
}

 

Don't hesitate to reach out to me for your store tasks and for digital marketing strategies that bring results.

Best,

Rohail Ali

rsdigitals.com

 

If helpful then please Like and Accept Solution.
Feel free to contact me for your Website Tasks: info@rsdigitals.com