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

  • Answers 7
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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,

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 post
  • 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 post
  • 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 post
  • 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 post
  • 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?

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post

Create an account or sign in to comment

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


×
×
  • Create New...