[Resolved] Can I have the text overlay of a hero image set to not display on mobile?

[David Bennett]

I have set the header element and the text overlay, and set the text to float left and be offset so it doesn’t bump into the image in the element – and it’s all good.

But it doesn’t look nice on mobile because the text overlaps the image.

So I would simply like the text not to show on mobile – so there is just the header image and no text overlay.

Can this be done? Did I miss a setting or is there some CSS?

Thank you.

[David]

Hi there,

try this CSS:

@media (max-width: 768px) {
    .inside-page-hero {
        display: none;
    }
}

If you want to apply it to a specific header element then you can add an Element Class in the editor. Then use .my-custom-class .inside-hero to target that specific hero.

Alternatively in your HTML content you can use the hide-on-mobile class e.g

<p class="hide-on-mobile">You won't see me on mobile</p>

[David Bennett]

Thanks,
Would that element class go in with the CSS so that it reads

.my-custom-class .inside-hero @media (max-width: 768px) {
    .inside-page-hero {
        display: none;
    }
}

Or does the element class .my-custom-class .inside-hero go in the Element editor in the ‘Element Classes’ ?

Taking out the text display on mobile reduces the top-to-bottom height of the element. I expected that and I can live with it, but is there a way to not have it do that?

Thanks

[David]

So the CSS would look like this:

@media (max-width: 768px) {
    .my-custom-class .inside-page-hero {
        display: none;
    }
}

And in the Element Classes you would add just this: my-custom-class – you don’t add . here.

In the header element you have a little mobile icon next to the padding so you could adjust the padding for mobile to accommodate for that change.

[David Bennett]

Many thanks. (I keep not seeing those little icons.)

Could I name the class my-big-fat-custom-class (or whatever) as long as I name it the same (with the dot) in the CSS? Or is there something reserved that means it has to be named my-custom-class

[David]

You can name it whatever you like – best to keep it as original as possible i generally prefix my classes with my initials e.g db-remove-mobile-content for example and then use that with the .dot in your CSS.

[Author]

Posts