Hide image on mobile

Hi everyone!
 

I would like to hide the header image on mobile (and only display the background colour on mobile version to make the text easier to read). I tried some of the examples I found here on the forum, but I can't seem to find the right id for the image? Could someone please help? 🙂

Can you share your website URL?

Sorry, I thought I did! It's https://swan-sunfish-y4db.squarespace.com/ 

Try this Custom CSS:

@media only screen and (max-width:767px) {
  section[data-section-id="65ccab80de3f6e051a0d2bfe"] {
    .section-background {
      display:none;
    }
  }
}

Worked perfectly. Thank you so much!!

5 hours ago, Linn-Sofia said:

Worked perfectly. Thank you so much!!

You're welcome!

Unfortunately. I've heard this solution isn't working for everyone. I can't understand why. On some people's iphones it still shows the desktop-image. Does anyone know why and how to fix it? Could the script be blocked somehow?

The site is now launched at https://arbetasmart.nu 

On 3/26/2024 at 10:51 PM, Linn-Sofia said:

Unfortunately. I've heard this solution isn't working for everyone. I can't understand why. On some people's iphones it still shows the desktop-image. Does anyone know why and how to fix it? Could the script be blocked somehow?

The site is now launched at https://arbetasmart.nu 

You can change 767 to 991 and check again

Thank you! I tried this but it's still not working on my colleague's iphone. Anything else I can try? 

Try with !important:

@media only screen and (max-width:767px) {
  section[data-section-id="65ccab80de3f6e051a0d2bfe"] {
    .section-background {
      display:none !important;
    }
  }
}

This is only to the section? I need the same help but only to an image. Not section.

On 4/5/2024 at 7:16 PM, Limedrop said:

This is only to the section? I need the same help but only to an image. Not section.

 

With Image, we can use Block ID, if you share link to page where you use Image, I can give you code easier