Jump to content

Change image depending on mobile vs. desktop

Recommended Posts

Site URL: https://www.andrewjchristensen.com/about

Hello! I'm wondering if anyone would know how to make a particular image swap for another image when viewed on mobile.

The image in question is the graphic below the body text on this page: andrewjchristensen.com/about (the handwritten initials). I'd like the mobile version to have my full-signature (seen in the top navigation on my desktop site). On mobile the initials appear way too large, and also redundant with my mobile logo image.

Any custom-code advice here? Thanks in advance!

Screen Shot 2021-04-22 at 9.28.23 AM.jpg

Link to comment
  • Replies 6
  • Views 1k
  • Created
  • Last Reply
14 hours ago, achristensen said:

Site URL: https://www.andrewjchristensen.com/about

Hello! I'm wondering if anyone would know how to make a particular image swap for another image when viewed on mobile.

The image in question is the graphic below the body text on this page: andrewjchristensen.com/about (the handwritten initials). I'd like the mobile version to have my full-signature (seen in the top navigation on my desktop site). On mobile the initials appear way too large, and also redundant with my mobile logo image.

Any custom-code advice here? Thanks in advance!

Screen Shot 2021-04-22 at 9.28.23 AM.jpg

Could you post both signature image here? I can have some suggestions

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
On 4/22/2021 at 9:40 PM, achristensen said:

Site URL: https://www.andrewjchristensen.com/about

Hello! I'm wondering if anyone would know how to make a particular image swap for another image when viewed on mobile.

The image in question is the graphic below the body text on this page: andrewjchristensen.com/about (the handwritten initials). I'd like the mobile version to have my full-signature (seen in the top navigation on my desktop site). On mobile the initials appear way too large, and also redundant with my mobile logo image.

Any custom-code advice here? Thanks in advance!

Add to Design > Custom CSS

/* Mobile about signature */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1615216321733_6156 {
    background-image: url(https://static1.squarespace.com/static/602ae91739fa1301bf08731d/t/6043889d513b644d69a0dcd9/1616353869049/?format=1500w);
    background-size: contain;
    background-repeat: no-repeat;
}

div#block-yui_3_17_2_1_1615216321733_6156 img {
    visibility: hidden;
}
}

 

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
9 hours ago, tuanphan said:

Add to Design > Custom CSS


/* Mobile about signature */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1615216321733_6156 {
    background-image: url(https://static1.squarespace.com/static/602ae91739fa1301bf08731d/t/6043889d513b644d69a0dcd9/1616353869049/?format=1500w);
    background-size: contain;
    background-repeat: no-repeat;
}

div#block-yui_3_17_2_1_1615216321733_6156 img {
    visibility: hidden;
}
}

 

This worked! Thanks so much!

I'm curious if you might have any idea how to now reduce the space below it... I'm afraid it's just going to be a restriction with Squarespace, as it seems that it inherited the same size bounding box as the initials, which needed to be a taller box, to accomodate the shape of the graphic. When I resize the box in the Squarespace editor for the mobile signature, then it makes the desktop box too short and cuts off the initial graphic.

This is something I could live with, but the ideal would be to reduce the space between the social links.

Thanks again for this code - I really appreciate it 🙂

Link to comment
19 hours ago, achristensen said:

This worked! Thanks so much!

I'm curious if you might have any idea how to now reduce the space below it... I'm afraid it's just going to be a restriction with Squarespace, as it seems that it inherited the same size bounding box as the initials, which needed to be a taller box, to accomodate the shape of the graphic. When I resize the box in the Squarespace editor for the mobile signature, then it makes the desktop box too short and cuts off the initial graphic.

This is something I could live with, but the ideal would be to reduce the space between the social links.

Thanks again for this code - I really appreciate it 🙂

Edit above code to this

/* Mobile about signature */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1615216321733_6156 {
    background-image: url(https://static1.squarespace.com/static/602ae91739fa1301bf08731d/t/6043889d513b644d69a0dcd9/1616353869049/?format=1500w);
    background-size: contain;
    background-repeat: no-repeat;
}

div#block-yui_3_17_2_1_1615216321733_6156 img {
    visibility: hidden;
}
div#block-yui_3_17_2_1_1615216321733_6156 .image-block-wrapper {
    padding-bottom: 20% !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
4 hours ago, tuanphan said:

Edit above code to this


/* Mobile about signature */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1615216321733_6156 {
    background-image: url(https://static1.squarespace.com/static/602ae91739fa1301bf08731d/t/6043889d513b644d69a0dcd9/1616353869049/?format=1500w);
    background-size: contain;
    background-repeat: no-repeat;
}

div#block-yui_3_17_2_1_1615216321733_6156 img {
    visibility: hidden;
}
div#block-yui_3_17_2_1_1615216321733_6156 .image-block-wrapper {
    padding-bottom: 20% !important;
}
}

 

This worked beautifully! Thank you so much for the help. This is perfect 🙂

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.