Jump to content

How to replace images when viewed in mobile

Recommended Posts

  • jessclark98 changed the title to How to replace images when viewed in mobile

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

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

Screenshot 2021-06-17 at 09.20.17.png

Link to comment

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

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

Link to comment
  • 4 months later...
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;
}
}
}

 

Link to comment

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.

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

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.