[Support request] How to remove image in background overlay only on mobile

[Lynn]

Hi there,
I am working on the following site: https://wellbeingreiki.ca/. At the top of each page there is a header with a background image and a background overlay that contains an image. I would like this background overlay image to appear on desktops and tablets but not on mobile. There is a way to remove the overlay image for desktop but there seems not to be a way to remove it only from mobile. Is there some technique or CSS that you can recommend so that I can accomplish this? Right now, the only way I can seem to hide the overlay image is to position it off the page on mobile.

Also, can you perhaps help me with a second issue? On the home age, the menu text does not show until after scrolling down the page until the sticky menu appears. I’m assuming this happens because on the home page the colour of the menu text is initially white. If I change any other page to the homepage the same thing happens. Otherwise the menu text is fine on other pages. I’ve tried to fix this but have not been successful.

Thanks in advance for your assistance.

Lynn

[Ying]

Hi Lynn,

1. Your site is built with Elementor, GP has no control over the content, so it’s better reach out to Elementor’s support for questions like this. However it’s an easy question, so give this CSS a try:

@media(max-width:768px) {
    .elementor-17 .elementor-element.elementor-element-23f6dd9 > .elementor-background-overlay {
        display: none;
    }
}

2. It seems you have a header element assigned to the front pagewhich can be found at appearance > elements. Looking at your homepage’s layout, the header element is not needed.

[Author]

Posts