Jump to content

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

Go to solution Solved by tuanphan,

Recommended Posts

  • Replies 5
  • Views 1.2k
  • Created
  • Last Reply

Top Posters In This Topic

  • Solution

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;
}
}

 

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

Link to comment
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

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 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

Link to comment
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?

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.