[Resolved] Hide Cover Block on a Mobile Device

[Megan]

Hi!

I’m using WordPress block editor, and currently have a container setup of Group > Cover > Media & Text. So a cover block within a group block, and then a media & text block within the cover. The result of this is that my media & text is backed by a cover image on desktop, but this looks shocking on mobile. I’m trying to disable just the cover image element from showing on mobile.

I’ve attempted to add CSS to the Advanced box for Additional CSS Class(es) for the cover block, but sadly this hasn’t worked. I’ve tried adding both “#content-mobile {display: none;}” and I also tried this:

@media (max-width:629px) {
img#optionalstuff {
display: none;
}
}

Neither of these did the trick.

Any possible trick to succeed in this?

Thanks!

[David]

Hi there,

try adding this CSS:

@media (max-width: 768px) {
    .no-mobile-background {
        background-image: none !important;
    }
}

then add no-mobile-background to the Additional CSS class on the Cover Block

[Megan]

Did the trick! Thankyou 🙂

[David]

You’re welcome

[Author]

Posts