Jump to content

Desktop Image not ideal for mobile, how about replacing with alternate image?

Recommended Posts

Site URL: https://elancloe.com/

Hello!

I'm hoping someone can help with this:

I had a code that would replace the image block on my landing page with an alternate image when you viewed on mobile, but I had to make changes to it and now it won't work and it looks like this:  

image.thumb.png.b5e76f218890b18f95c17c351f527a2e.png

Could someone help me with the code to make the below attached image appear when viewing my site on mobile, while keeping the original image the way it is on the desktop? Thank you so much in advance for your help! 

 

image.thumb.png.97094883099e8923caddd78782eefb0d.png

 

ElanCloe Banner 4 mobile Complete glorious.png

Link to comment
  • Replies 4
  • Views 818
  • Created
  • Last Reply
On 1/31/2021 at 9:11 AM, PBP said:

Site URL: https://elancloe.com/

Hello!

I'm hoping someone can help with this:

I had a code that would replace the image block on my landing page with an alternate image when you viewed on mobile, but I had to make changes to it and now it won't work and it looks like this:  

image.thumb.png.b5e76f218890b18f95c17c351f527a2e.png

Could someone help me with the code to make the below attached image appear when viewing my site on mobile, while keeping the original image the way it is on the desktop? Thank you so much in advance for your help! 

 

image.thumb.png.97094883099e8923caddd78782eefb0d.png

 

ElanCloe Banner 4 mobile Complete glorious.png

Design is switch to background image, so you use this, remember to replace the image url

@media screen and (max-width: 767px) {
  section[data-section-id="60158a57b6ec6f5af0b86d91"] .section-background img {
    opacity: 0;
  }
  section[data-section-id="60158a57b6ec6f5af0b86d91"] .section-background {
    background: url('https://content.invisioncic.com/p289038/monthly_2021_01/1971123509_ElanCloeBanner4mobileComplete.thumb.png.f19d42b7a48c48db7cd9376a9373f3c5.png');
    background-size: cover;
    background-repeat: no-reapeat;
  }
}

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

image.thumb.png.e6eda9b0cc283c8dd6c036385a48170f.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

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