How to replace images when viewed in mobile

Site URL: https://www.jessclarkdesign.com/new-page

On my site I have images for each project linking to their separate pages, does anyone have any code that would allow me to replace the image when viewed on mobile to a more suitable sized one, like how you can for banner images please?

Hi Jess,

Try the following code, let me know if this fixes the cropping issue on mobile devices for your "new-page" section.

#collection-60c47ed7c714e269022b2aff {
@media only screen and (max-width: 640px) {
.gallery-fullscreen-slideshow {
height: 100% !important;
}
}
}

Hope this helps!

-Dan

11 hours ago, Wolfsilon said:

Hi Jess,

Try the following code, let me know if this fixes the cropping issue on mobile devices for your "new-page" section.

#collection-60c47ed7c714e269022b2aff {
@media only screen and (max-width: 640px) {
.gallery-fullscreen-slideshow {
height: 100% !important;
}
}
}

Hope this helps!

-Dan

Hi Dan,

Thank you that does solve the cropping, I was looking to use code that would let me replace the image when viewed on mobile, so I could use an image like below. I previously did this for banner images and this is the code I used:

media only screen and (max-width: 640px){

#page .page-section:nth-child(1)
   .section-background img {
  opacity:0 
   }
#page .page-section:nth-child(1)
   .section-background {
background-image: url(https://static1.squarespace.com/static/607fd834cc2b3d1c6038d54a/t/608175fa695dc47c58640bb7/1619097084730/studysuite+mobile+banner+ai.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

It's a little tricky to test but I think you'd be able to use the code below for each image. Just swap the ID for each of your sections on the page and insert the image url for the corresponding section ID.

section[data-section-id="60c47f0723695f68078a9d17"] {
@media only screen and (max-width: 640px) {
.gallery-fullscreen-slideshow-item-img img {
display: none; 
}
.gallery-fullscreen-slideshow-item-img::before {
content: "";
position: absolute;
width: 100%;
height: 100vh;
background-image: url("YOUR_URL_IMAGE_HERE");
background-size: cover;
background-position: center, center;
background-repeat: no-repeat;
z-index: 1;
}
}
}

Hope this helps,

-Dan

1 hour ago, Wolfsilon said:

It's a little tricky to test but I think you'd be able to use the code below for each image. Just swap the ID for each of your sections on the page and insert the image url for the corresponding section ID.

section[data-section-id="60c47f0723695f68078a9d17"] {
@media only screen and (max-width: 640px) {
.gallery-fullscreen-slideshow-item-img img {
display: none; 
}
.gallery-fullscreen-slideshow-item-img::before {
content: "";
position: absolute;
width: 100%;
height: 100vh;
background-image: url("YOUR_URL_IMAGE_HERE");
background-size: cover;
background-position: center, center;
background-repeat: no-repeat;
z-index: 1;
}
}
}

Hope this helps,

-Dan

Its worked!!! Thanks so much for all your help 🙂 

You’re very welcome! 

On 6/17/2021 at 4:18 PM, Wolfsilon said:

It's a little tricky to test but I think you'd be able to use the code below for each image. Just swap the ID for each of your sections on the page and insert the image url for the corresponding section ID.

section[data-section-id="60c47f0723695f68078a9d17"] {
@media only screen and (max-width: 640px) {
.gallery-fullscreen-slideshow-item-img img {
display: none; 
}
.gallery-fullscreen-slideshow-item-img::before {
content: "";
position: absolute;
width: 100%;
height: 100vh;
background-image: url("YOUR_URL_IMAGE_HERE");
background-size: cover;
background-position: center, center;
background-repeat: no-repeat;
z-index: 1;
}
}
}

Hope this helps,

-Dan

Hey Dan - this is really helpful! But I'm having trouble adapting to the first slideshow image on my site. Can you take a look and let me know what I'm missing? Right now the background image is disappearing but not replacing with the new image. See below.

Site: https://pigeon-maracas-9ccm.squarespace.com/
PW: happy2021

section[data-section-id="615df008e325c12851ac481a"] {
@media only screen and (max-width: 640px) {
.slideshow-holder
  .slide-media-container
    img
     {
display: none; 
}
 .slideshow-holder
  .slide-media-container
    img
    img::before {
content: "";
position: absolute;
width: 100%;
height: 100vh;
background-image: url("https://www.dropbox.com/s/jp2j24i874qveg2/cassie-holmes-hero-banner_mobile-no-headshot.jpg?raw=1");
background-size: cover;
background-position: center, center;
background-repeat: no-repeat;
z-index: 1;
}
}
}

Hello,

So, the difference in your case vs. the original question is that Jess is using the gallery slideshow block and has each photo already placed into the 'slideshow'. From the looks of it, you're using a list slideshow which operates completely differently and I'm not seeing a second image uploaded into the second slide slot.

What are you trying to achieve? In the original post, we were attempting to maintain, or replace an image for each of the "slides" on mobile devices.

On 10/25/2021 at 3:32 PM, Wolfsilon said:

Hello,

So, the difference in your case vs. the original question is that Jess is using the gallery slideshow block and has each photo already placed into the 'slideshow'. From the looks of it, you're using a list slideshow which operates completely differently and I'm not seeing a second image uploaded into the second slide slot.

What are you trying to achieve? In the original post, we were attempting to maintain, or replace an image for each of the "slides" on mobile devices.

Hey Wolfsilon! Great question. The issue is the dynamic movement of the card covers the subjects face when viewed on mobile. I'd like to use a different image when viewed on mobile that excludes the subjects profile image – the image that is hosted in dropbox and linked in the above code. Does that make sense? 

And yes, you're correct, this is the first slide in a carousel block which makes things a bit trickier. I don't want to impact the other slides in the carousel, only the first. Other solutions are welcome. haha

Thank you!