Mobile Respnsove (iphone)

[Trevor]

My wesbite looks great on desktop but on the iphone the headers are too large. What adjustments do I need to make to decrease the H1 and H2 so it optimizes for mobile. Right now the headlines are way too big. Kind of new to this…. I’ve included the link to my website URL

Thanks,

Trevor

[Tom]

Hi there,

You’ve added font sizes as inline styles, so those will be hard to change on mobile: https://www.screencast.com/t/9iNOEIPgvbC4

Instead of doing that, I suggest using the font size options in Customize > Typography > Headings to set the desktop and mobile sizes of your H1/H2 elements etc..

Let us know if you need more info 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Trevor]

Thanks. If I change the font size for desktop, can I make it a different font size for ipad and iphone? Or would the same size be for all?

[Leo]

Yup – As Tom mentioned the H1 and H2 have desktop and mobile specific options:
https://www.screencast.com/t/xevlnpEFqA8I

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Trevor]

Thanks! Just wondering why I can’t see H3, H4, H5, desktop and mobile specific options?

[Leo]

We didn’t add those options as usually H3-H5 are smaller font so the size can be the same on desktop and mobile.

We always try to limit the number of options and only add the most useful ones to keep the theme and premium plugin lightweight and fast.

If you need the mobile specific options for those as well, add this CSS:

@media (max-width: 768px) {
    h3 {
        font-size: 15px;
    }
    h4 {
        font-size: 15px;
    }
    h5 {
        font-size: 15px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Let me know if this helps 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Trevor]

Gotcha, Thanks for the CSSS Leo.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts