Vaktis_naturbruk Posted November 14, 2019 Share Posted November 14, 2019 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 Link to comment
lu.diehl Posted November 14, 2019 Share Posted November 14, 2019 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
Vaktis_naturbruk Posted November 21, 2019 Author Share Posted November 21, 2019 Hi Lu, Thanks for your help. It works! 🙂 Link to comment
colehensley Posted January 5, 2020 Share Posted January 5, 2020 @lu.diehl is there a CSS code for hiding banner images on regular pages (mobile view) that are NOT index pages? Link to comment
chambershire Posted April 15, 2020 Share Posted April 15, 2020 @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
lu.diehl Posted April 15, 2020 Share Posted April 15, 2020 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
OldCityMailroom Posted April 29, 2020 Share Posted April 29, 2020 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
tuanphan Posted April 30, 2020 Share Posted April 30, 2020 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
Recommended Posts
Archived
This topic is now archived and is closed to further replies.