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!

Link to comment
  • Replies 2
  • Views 1.4k
  • Created
  • Last Reply
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

Archived

This topic is now archived and is closed to further replies.


×
×
  • 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.