Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Remove banner on mobile site?


Vaktis_naturbruk

Question

7 answers to this question

Recommended Posts

  • 0

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
  • 0

@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
  • 0
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
  • 0

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! 

Edited by OldCityMailroom
Link to comment
  • 0
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.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...