Is it possible to have different images on the mobile version of the website and desktop version?

Hello, 

We would like to have the header image (homepage) on our mobile website that are different from the desktop version. Is that possible and does someone know how to do this? 

Thank you in advance!

Site: https://harp-apricots-3p6k.squarespace.com

Password: culetti

16 hours ago, tuanphan said:

Yes. Possible. You can use 2 images, then we can give code to show 1 on desktop, show another on mobile.

But you can consider resize image on mobile only, by using this code (Design > Custom CSS)

/* resize list image on mobile */
@media screen and (max-width:991px) {
[data-section-id="64bfc8ff390e20685cb86214"] ul {
    min-height: unset !important;
}
}

 

Is there a code to do this same thing for a background image? I like my homepage banner background image, but on mobile it gets cropped because of the vertical format. 

14 hours ago, KRITIKOZZZ said:

Is there a code to do this same thing for a background image? I like my homepage banner background image, but on mobile it gets cropped because of the vertical format. 

Yes. Possible. Use this code

/* resize list image on mobile */
@media screen and (max-width:991px) {
[data-section-id="64bfc8ff390e20685cb86214"] .section-border img {
   content: url(https://cdn.pixabay.com/photo/2023/06/04/11/42/river-8039447_1280.jpg);
}
}

Replace with your data section id. Use this free tool to find id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Or you can share site url, we can also give code to resize image on mobile, so no need to use new image

8 hours ago, tuanphan said:

Yes. Possible. Use this code

/* resize list image on mobile */
@media screen and (max-width:991px) {
[data-section-id="64bfc8ff390e20685cb86214"] .section-border img {
   content: url(https://cdn.pixabay.com/photo/2023/06/04/11/42/river-8039447_1280.jpg);
}
}

Replace with your data section id. Use this free tool to find id https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

Or you can share site url, we can also give code to resize image on mobile, so no need to use new image

I tried that code and it changed my desktop background as well. I'm not sure if i'm doing this correctly. What i am looking for is my header background image on desktop to remain as is, and to swap that image out on mobile completely to another one so it isn't cropped weird. 

site is www.aurabyangelo.com 
section id is 63c5d881a578a930412be534

8 hours ago, KRITIKOZZZ said:

 

I tried that code and it changed my desktop background as well. I'm not sure if i'm doing this correctly. What i am looking for is my header background image on desktop to remain as is, and to swap that image out on mobile completely to another one so it isn't cropped weird. 

site is www.aurabyangelo.com 
section id is 63c5d881a578a930412be534

That code runs on mobile + tablet only. If it change both desktop + mobile, maybe you placed code in wrong position. Can you send all code in CSS after you added above code?