Modifying mobile font sizes

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!

@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;
}
}

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!