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

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

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #942949
    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.

    #942975
    David
    Staff
    Customer Support

    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>

    #943043
    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

    #943052
    David
    Staff
    Customer Support

    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.

    #943067
    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

    #943071
    David
    Staff
    Customer Support

    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.

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.