Set font size separately for mobile and desktop view

yehaui
New Member
1 0 0

Hi there!

Ideally I would like to be able to set the font sizes for mobile view and desktop view separately in the theme editor, but because this is not possible I am looking for a different solution for this matter. 
Is there a way to hard code the font size for the desktop view to be set to medium and for mobile view to small using some sort of conditional expressions? 

Up to now, I have looked into the settings_schema.json file and figured the return values for the two settings would be "62.5%" and "50%", respectively. I then tried to insert these values in the theme.scss.liquid file for the settings-font-size-base value, as shown below. 

$settings-font-size-base: {{ settings.type_base_size }};

//For Desktop
@media screen and (min-width: 751px) {
$settings-font-size-base: {{ "62.5%" }};
}
//For Mobile
@media screen and (max-width: 750px) {
$settings-font-size-base: {{ "50%" }};
}

 However, I can't comment out the first line, or the site won't load properly and the distinction between desktop and mobile I am trying to achieve does not work. It seems to always be the setting for the latter which takes effect. 

Please go easy if all of this is complete rubbish, I am rather new to the topic of HTML and CSS etc. 
Anyways, happy for everything that might help point me in the right direction!

 

P.S.: Theme is Narrative if this helps...

0 Likes