Ernest

6 hours ago, tuanphan said:

On Mobile, to avoid image crop will need to set the fullwidth, but to not stretch the image will need to reduce the height, and in most cases that I have encountered they will always create a very large white space, about half screen height.

You can consider a solution like the comment above, they push the image to the center of the screen, and change the background color of the top and bottom. (on Mobile)

I have fixed it with one of your earlier codes but changing the numbers a little bit: instead of height '100vh' I changed it to height '75vh' and all is perfect now!!

Thank you!!

The code that worked:

/* Mobile slideshow */
@media screen and (max-width:767px) {
.gallery-slideshow {
    height: 75vh !important;
}
}
 

14 hours ago, tuanphan said:

If resize image to full size, the image will not be able to fill the height of the screen, and vice versa. We can adjust the image left or right (with the code) to make it display better.

Do you still need code?

Thank you Tuanphan.

95% of my images are vertically shot (the images are long, not wide) , could you think of a code that prevents the cropping on a mobile device but uses as little blank space as possible? 

On 7/27/2023 at 5:26 AM, tuanphan said:

Use this code

/* Mobile slideshow */
@media screen and (max-width:767px) {
body.homepage .gallery-slideshow {
    height: 100vh !important;
}
body.homepage .gallery-slideshow img {
	object-fit: cover !important;
}
}

 

Thank you again Tuanphan! The blank space is gone, but now the images are cropped on a mobile device. On a desktop (or use the option 'desktop site' on a mobile device) it works fine. Can you think of something to prevent the cropping?

Cheers,

5 hours ago, tuanphan said:

Can you disable autoscroll temporarily? We can test code easier

https://www.ernestleroy.com/

Yes of course, it is disabled now.

Thank you.

Bump: I have the same request!

3 hours ago, tuanphan said:

Try adding to Design > Custom CSS

/* Mobile slideshow */
@media screen and (max-width:767px) {
.gallery-slideshow {
    height: 100vh !important;
}
}

 

Thank you Tuanphan.

Already better! But now there is quite some white space above the photo. Is there a way to fix that?

5 hours ago, tuanphan said:

Did you solve it or you still need to reduce white space under slideshow?

Thanks for the quick reply Tuanphan; strange that it looks normal on your emulated iPhone 12 pro. On my Google Pixel 6 pro and friends iPhone I still have the white space under the slide show.

This emulator shows the same:

Thank you so much for all your work Tuanphan, strange that Squarespace doesn't fix this issue since its recurring for years now.

On the mobile version of my website www.ernestleroy.com (on the homepage) there is a big white space below the Simple Gallery which makes the gallery very small on a mobile device. On desktop it all works fine. Do you have a solution?

Screenshot mobile:

Screenshot desktop:

Kind regards,

Ernest