Jump to content

Remove banner on mobile site?

Recommended Posts

  • Replies 7
  • Views 3.7k
  • Created
  • Last Reply

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;
  }
}
Link to comment
  • 1 month later...
  • 3 months later...

@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/

Link to comment
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!

Link to comment
  • 2 weeks later...

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! 

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.