Stylin Issue on Mobile Devices

[mrlennyman]

Hi there,

I wonder if someone can help me with a styling issue I am having with my h3 titles on mobile devices. I changed the font of h3 and increased it's px size. This looks fine on the computer version of the site. but when I look at the screen on mobile device, the text change back to the original font and is massive in size. It seems as though the media device is taking on the size but not the correct font family.
I am using the Aspire theme and the site I am working on is http://testsite.thegreatmedicine.com

All help much appreciated.
John

http://testsite.thegreatmedicine.com

[Sridhar Katakam]

When I inspect the h3 headings on your site in mobile devices, the font family is remaining the same as on desktops: 'Wild Pen 1'.

You might want to reduce the font size for smaller screens by writing the needed media queries in style.css.

Ex.:

@media only screen and (max-width: 500px) {

    h3 {
        font-size: 40px;
    }
    
}

---

Genesis Tutorials | Follow me on Twitter

[mrlennyman]

Thank you for the reply Sridhar. I see the same when I inspect the code. But when I physically view the site on a mobile device, the font does not change. I am unable to figure out why this is and that is why I am here.

Are you able to look at the site on a mobile device? Does the font stay or change? I have tried removing the caching plugins and resetting my phones but it still persists. Are there any other bits of code I might be missing?

[Author]

Posts