Remove banner on mobile site?

How do I remove the banner image on a page in mobile and/or tablet view using the Mojave template?

https://www.jarnanaturbruksgymnasium.se/

Thanks for your help.

Kind regards,

Ronald

Hi @Vaktis_naturbruk, do you want to remove the banner image on all pages or which specific page? The code below hides the banner image for the home page only, but if you wish to hide it on all pages, then remove #collection-588217d48419c28b7ce46248 from the code. Let me know if it works! 😉

@media screen and (max-width: 640px){
 #collection-588217d48419c28b7ce46248 .Index-page--has-image .Index-page-content {
    display: none;
  }
}

Hi Lu,

Thanks for your help.

It works! 🙂

@lu.diehl is there a CSS code for hiding banner images on regular pages (mobile view) that are NOT index pages?

@lu.diehl thanks for posting the fix. I've tried it on my site but it's actually removing the whole block on mobile not just the image.

I just want to hide the background image because it causes a text contrast issue. At the moment that code hides the image, text and content block in the collection ID for the page. 

Here is the code I have:

@media screen and (max-width: 640px){
 #collection-5e83f831f07ae0618d6b2c0d .Index-page--has-image .Index-page-content {
    display: none;
  }
}

I've disabled this on the site for now so that the block displays for now but the affected site is https://futuredentistryaustralia.squarespace.com/

4 hours ago, chambershire said:

I just want to hide the background image because it causes a text contrast issue. 

Hi @chambershire - you have to target the class for the background image only.

If you want to hide the image background for the first section only, then add the following code. If you want to remove the background image for the entire page, remove .welcome-1

@media screen and (max-width: 640px){
 #collection-588217d48419c28b7ce46248 .welcome-1 .Index-page-image {
    display: none;
  }
}

Let me know if it works!

Hi there, I have a similar question. This is the page I am working on — www.strucksured.com/home

On the 5th section, I want to hide the banner image (the gold lines + collage papers) on mobile since it looks odd. 

I have tried applying the codes from above but can't seem to get it to work. Any thoughts?

Thank you in advance! 

8 hours ago, OldCityMailroom said:

Hi there, I have a similar question. This is the page I am working on — www.strucksured.com/home

On the 5th section, I want to hide the banner image (the gold lines + collage papers) on mobile since it looks odd. 

I have tried applying the codes from above but can't seem to get it to work. Any thoughts?

Thank you in advance! 

It seems you solved? If not, can you take screenshot?