Archived topic

Hide Cover Block on a Mobile Device

3 replies · Started by Megan on May 2, 2020

Viewing posts 1–4 of 4

May 2, 2020 at 9:11 pm #1266953

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!

May 3, 2020 at 5:52 am #1267289

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

May 4, 2020 at 1:27 am #1268335

Did the trick! Thankyou :)

May 4, 2020 at 4:25 am #1268545

You're welcome

This archived topic is closed to new replies.

Start building better websites today.