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

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>

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

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.

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

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.