Jump to content

Hide image on mobile

Recommended Posts

Hi everyone!
 

I would like to hide the header image on mobile (and only display the background colour on mobile version to make the text easier to read). I tried some of the examples I found here on the forum, but I can't seem to find the right id for the image? Could someone please help? 🙂

 

 

Link to comment

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Try this Custom CSS:

@media only screen and (max-width:767px) {
  section[data-section-id="65ccab80de3f6e051a0d2bfe"] {
    .section-background {
      display:none;
    }
  }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
5 hours ago, Linn-Sofia said:

Worked perfectly. Thank you so much!!

You're welcome!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 4 weeks later...
On 3/26/2024 at 10:51 PM, Linn-Sofia said:

Unfortunately. I've heard this solution isn't working for everyone. I can't understand why. On some people's iphones it still shows the desktop-image. Does anyone know why and how to fix it? Could the script be blocked somehow?

The site is now launched at https://arbetasmart.nu 

You can change 767 to 991 and check again

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

Try with !important:

@media only screen and (max-width:767px) {
  section[data-section-id="65ccab80de3f6e051a0d2bfe"] {
    .section-background {
      display:none !important;
    }
  }
}

 

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 4/5/2024 at 7:16 PM, Limedrop said:

This is only to the section? I need the same help but only to an image. Not section.

 

With Image, we can use Block ID, if you share link to page where you use Image, I can give you code easier

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

Create an account or sign in to comment

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

×
×
  • 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.