Jump to content

How do I make the background effect only apply to desktop homepage and not mobile homepage?

Go to solution Solved by tuanphan,

Recommended Posts

Hi everyone, 

I need custom code to allow the background image on the homepage to have an "image effect" on the desktop version while at the same time have the mobile version remain without effect. Right now, my site, nataliemurphy.com, has a squiggly image that looks great on the desktop version but looks very strange on the mobile version. 

Thank you!

Natalie 

 

IMG_5229.jpeg

Link to comment
  • Solution
On 4/15/2023 at 6:57 PM, nataliem407 said:

Hi Tuan!

Here's the page I was talking about. https://www.nataliemurphy.com/

Thank you for looking into this!!

Natalie 

Add this to Design > Custom CSS

@media screen and (max-width:767px) {
    [data-section-id="63a60f2cc6eee1275a9df93e"] .section-background-canvas.background-fx-canvas {
    display: none;
}
[data-section-id="63a60f2cc6eee1275a9df93e"]  img {
    visibility: visible !important;
}
[data-section-id="63a60f2cc6eee1275a9df93e"] {
    min-height: unset !important;
    height: 45vh;
}
}

 

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
  • 8 months later...
On 1/4/2024 at 8:36 PM, lletleads said:

Hi i would like to do the same, so avoid the image effects only on mobile but on specific Image blocks; Is there any way of achieve that? Thanks

 

This is the URL: http://oarfish-grapefruit-g8wm.squarespace.com

The pass is: 1234

 

The problem is in the homepage with all the photos

 

Hi,

Password is incorrect

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
  • 3 months later...
On 4/22/2024 at 5:39 PM, Dario88c said:

Hello everyone,

I'm looking for custom code that will keep the background image (our services section) only on the homepage for desktop users, while ensuring it disappears for the mobile version

Here is the link: https://beagle-cod-7bmw.squarespace.com/ and here's the password: 5p0rt51nv3st2024
 
Thank you!

Dario

To remove image on mobile, you can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:767px) {
[data-section-id="6613ff16f9286224504f421e"] .section-border img {
    opacity: 0;
}
}

 

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.