[Resolved] Hide Background/Cover image on mobile

[Kevin]

Hi, I’m trying to hide the background/cover images on my site. I added the below to the simple css but it does not seem to work.

<div class="hide-on-mobile hide-on-tablet">
    Content here will only display in Desktop
</div>

The site is in draft mode but here is a published page:

Any input?

Thanks!

Kevin

[Leo]

Hi there,

Can you disable the AMP plugin for now and any other caching plugins you might be using?

Let me know 🙂

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

[Kevin]

Done

[Leo]

Weird. I’m still seeing a bunch of AMP code involved:
https://www.screencast.com/t/wuZhb56sBp

Could you double check?

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

[Kevin]

Apologies, I had no me left on..it’s deactivated.

[Leo]

It’s a bit tricky as the background image is added as inline HTML style.

Give this CSS a shot:

@media (max-width: 768px) {
    .wp-block-cover.has-background-dim.ab-layout-landing-3-cover {
        background-image: none !important;
    }
}

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

[Kevin]

That worked! Thanks for the prompt response as always!

[Leo]

No problem 🙂

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

[Author]

Posts