Change image depending on mobile vs. desktop

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!

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!

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

On 4/22/2021 at 11:56 PM, bangank36 said:

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

Sure! I appreciate the help 🙂

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

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 🙂

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

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 🙂