Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to replace images when viewed in mobile


jessclark98

Question

6 answers to this question

Recommended Posts

  • 0

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

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

@jessclark98 Do you need support with these issues?

Site URL – https://www.jessclarkdesign.com/

2. (Mobile – Homepage) Add space between image and footer?

jessclarkdesign.com-5-min.png

3.(Mobile – Studysuite) Resize image?

https://www.jessclarkdesign.com/studysuite

jessclarkdesign.com-06-min.png

4. (Mobile – Studysuite) Resize image?

https://www.jessclarkdesign.com/studysuite

jessclarkdesign.com-07-min.png

5. (Mobile – Highchair) Space between left of screen-text & right of screen-text is not align.

https://www.jessclarkdesign.com/high-chair

jessclarkdesign.com-08-min.png

6. (Tablet – Homepage) Resize image?

jessclarkdesign.com-09-min.png

 

7. (Tablet – platform for joy) Resize image?
jessclarkdesign.com-11-min.png

8. (Tablet – about) Stacked Image/text?

jessclarkdesign.com-12-min.png

9.  (Tablet-Hight Chair) Increase text width?

jessclarkdesign.com-10-min-1.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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