Jump to content

Modifying mobile font sizes

Recommended Posts

Site URL: https://kristelandnic.com/

PW: 94591

I was able to modify fonts on mobile using the following code. But when I logged back it looks like there is some weirdness going on.

@media screen and (max-width: 767px) {
body[data-dynamic-font-sizing-enabled="false"]
  h2 {
    font-size: 40px;
    line-height: 1.3384;
}
body[data-dynamic-font-sizing-enabled="false"]
   h3 {
    font-size: 50px;
    line-height: 1.3384;
}
body[data-dynamic-font-sizing-enabled="false"]
   h4 {
    font-size: 16px;
    line-height: 1.5;
}
}

Desktop fonts were reading the mobile font sizes. So I deleted the code above and now mobile fonts are reading as desktop fonts. Im not sure if using the above code is the best way of modifying the mobile font sizes so it may have cause some kinda issue. If you refresh the mobile page, you can quickly see the correct font sizing before it jumps back to desktop font sizes. I also seeing this on the mobile text sections which is weird:

@media screen and (max-width: 1943px) and (min-width: 0) and (orientation: portrait)

site.css?&f…es=false:12

body[data-dynamic-font-sizing-enabled="true"] h3 {

font-size: calc(5.55vh + 1rem);

Any help is much appreciated!

Edited by narnado
Link to comment
  • Replies 2
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

@media screen and (max-width:767px) {
  h2 {
    font-size: 40px;
    line-height: 1.3384;
}
   h3 {
    font-size: 50px;
    line-height: 1.3384;
}
   h4 {
    font-size: 16px;
    line-height: 1.5;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
3 hours ago, tuanphan said:

@media screen and (max-width:767px) {
  h2 {
    font-size: 40px;
    line-height: 1.3384;
}
   h3 {
    font-size: 50px;
    line-height: 1.3384;
}
   h4 {
    font-size: 16px;
    line-height: 1.5;
}
}

 

thanks for you reply @tuanphan 

I included the above but it looks like the font size isnt having an effect on the mobile h's. line height seems to work fine. looking at inspector, it looks like the media query is adjusting the fonts at a max-width of 1943. Not sure if that has anything to do with the fonts not being responsive. Appreciate your help!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.