Jump to content

Trouble displaying a different image for mobile

Recommended Posts

Site URL: https://www.conventuscap.com/

I thought this would be pretty simple, but I can't seem to have a different background image display on mobile vs. desktop.

Here's the code I'm using; i've tried many iterations. I'm not very technical so have been relying on forums, videos and chat-gpt to generate the code.
 

/* Desktop background image setup */
[data-section-id="66db7a976f5ccd2bf1766db6"] {
  background-image: url('https://images.squarespace-cdn.com/content/v1/66db7a6d7845a054f30f1833/e9642412-db53-4837-b450-ad850a2407ab/Conventus+Capital+Website+Cover.png?format=2500w') !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background: unset !important; /* This can help reset any previously set inline background styles */
}

/* Mobile background image setup */
@media screen and (max-width: 640px) {
  [data-section-id="66db7a976f5ccd2bf1766db6"] {
    background-image: url('https://images.squarespace-cdn.com/content/66db7a6d7845a054f30f1833/87c975f8-f478-475f-a551-6b5d3a4ce36e/Conventus+Capital+Mobile+Cover.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background: unset !important; /* This can help reset any previously set inline background styles */
  }
  
  /* Remove any nested background image if applied */
  [data-section-id="66db7a976f5ccd2bf1766db6"] > .content-wrapper {
    background-image: none !important;
  }
}

Link to comment

@g2creative2024  Hi! You can add this code under Websites > Pages > Website Tools > Custom CSS 

@media only screen and (max-width: 640px) {
    section[data-section-id="66db7a976f5ccd2bf1766db6"] .section-background img { 
        opacity: 0 !important;
    }

    section[data-section-id="66db7a976f5ccd2bf1766db6"] .section-background {
        background-image: url('https://images.squarespace-cdn.com/content/66db7a6d7845a054f30f1833/87c975f8-f478-475f-a551-6b5d3a4ce36e/Conventus+Capital+Mobile+Cover.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

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.