Cover block – not mobile friendly

Hello @nichere,

The Cover block has been added by WordPress, and the theme doesn’t have any control over it, however, put the CSS below in Customizing > Custom CSS/JS > CSS Code:

.wp-block-cover h2.wp-block-heading {
    font-size: 42px !important;
}

Please read this link for more information about the CSS/JS code on the customizer: https://docs.oceanwp.org/article/354-add-custom-css-and-js-to-your-website.

Note: If you have any cache plugin or server cache(CDN / Browser Cache and Cookies and …), you need to clear its cache contents or disable them to see your changes.

Furthermore, you can learn how to use Chrome Developer Tools or Firefox Developer Tools to help you see and test changes to your CSS:
https://developers.google.com/web/tools/chrome-devtools/
https://developer.mozilla.org/en-US/docs/Tools
CSS Tutorial: https://www.w3schools.com/css/
For more information about media queries, please read this article:
https://www.w3schools.com/css/css_rwd_mediaqueries.asp

Best Regards

Thank you for trying to assist me here.

sorry mate, but all that CSS code has done is reduced the font size. Still looks really bad on mobile.

It is to do with viewports not font size no?

I like the font size in desktop, so i dont want to change that view. Its the mobile view that is the issue.

Hello @nichere,

Please check this article: https://www.w3schools.com/css/css_rwd_mediaqueries.asp.

You can add that CSS to your desired size, for example:

@media(max-width:960px) {
    .wp-block-cover h2.wp-block-heading {
        font-size: 62px !important;
    }
}

or:

@media(max-width:480px) {
    .wp-block-cover h2.wp-block-heading {
        font-size: 38px !important;
    }

    .wp-block-cover .wp-block-group__inner-container {
        max-width: 100% !important;
    }
}

Result: https://postimg.cc/zbw6RxDm
Please let me know if you have any questions about the above items.

Best Regards

Yes that’s it , thanks very much!

You’re welcome. I’m glad we could help.
If there is anything else we can help you with, please don’t hesitate to reach out to us.