Removing blank space on mobile version of site

@tuanphan hello, thank you I tried this and it removed the space on top. Which is great, but it removed the caption on mobile:

On 7/6/2023 at 12:57 AM, Mary_DG said:

@tuanphan hello, thank you I tried this and it removed the space on top. Which is great, but it removed the caption on mobile:

 

 

You try changing 30vh to 35vh

Thank you @tuanphan I did it with 45vh. Is there anyway to decrease the space between the caption and the image:

Hi @tuanphan I have the same issue on my site on the mobile view, at the bottom there is alot of whitespace.  its https://blue-marigold-t72j.squarespace.com pw is tinman . 

I would appreciate your help.

On 7/10/2023 at 10:49 PM, Mary_DG said:

Thank you @tuanphan I did it with 45vh. Is there anyway to decrease the space between the caption and the image:

 

I see you hide caption. Do you still need help?

On 7/11/2023 at 12:07 PM, rainystaterealtor said:

Hi @tuanphan I have the same issue on my site on the mobile view, at the bottom there is alot of whitespace.  its https://blue-marigold-t72j.squarespace.com pw is tinman . 

I would appreciate your help.

Try adding to Design > Custom CSS

/* Mobile homepage */
@media screen and (max-width:767px) {
body#collection-643ca45b9cbbd6195d8727ef section {
    height: 100vh !important;
    min-height: unset !important;
}
body#collection-643ca45b9cbbd6195d8727ef {
    overflow: hidden;
}
}

Hi Tuanphan, yes, please. I am still using 30vh until i have code that will decrease the space between the image and caption. Thank you. 

On 7/17/2023 at 2:59 PM, Mary_DG said:

Hi Tuanphan, yes, please. I am still using 30vh until i have code that will decrease the space between the image and caption. Thank you. 

Hello @tuanphan hope you can get back to me. Also, 

On 7/22/2023 at 8:20 AM, Mary_DG said:

Hello @tuanphan hope you can get back to me. Also, 

On The Start of a Journey page, the album looks okay when the phone is held in portrait mode. But when the phone is turned into landscape mode, instead of the images on the album looking larger, they become extremely tiny. Any way for the image to respond to landscape mode?

 

 

Can you share link to this page?

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

15 hours ago, Ernest said:

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

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

On 7/22/2023 at 7:46 PM, tuanphan said:

Can you share link to this page?

https://www.hellocinnamon.com/start-of-a-journey

Thank you in advance. 

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:

17 hours ago, Mary_DG said:

https://www.hellocinnamon.com/start-of-a-journey

Thank you in advance. 

Try adding to Design > Custom CSS

/* Mobile Start of a journey page mobile */
@media screen and (max-width:767px) and (orientation:landscape) {
body#collection-62529309c36f381162dc8983 .gallery-slideshow {
    height: 150vh !important;
}
}

16 hours ago, Ernest said:

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:

 

Try adding to Design > Custom CSS

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

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?

14 hours ago, Ernest said:

Thank you Tuanphan.

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

 

Can you disable autoscroll temporarily? We can test code easier

https://www.ernestleroy.com/

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.

18 hours ago, Ernest said:

Yes of course, it is disabled now.

 

Thank you.

 

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

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,

On 7/25/2023 at 1:43 AM, tuanphan said:

Try adding to Design > Custom CSS

/* Mobile Start of a journey page mobile */
@media screen and (max-width:767px) and (orientation:landscape) {
body#collection-62529309c36f381162dc8983 .gallery-slideshow {
    height: 150vh !important;
}
}

 

Thank you again, Tuanphan, it worked great on hellocinnamon.com site. It is perfect. 

But I tried using the same code in our other website: www.aelo.ai

slideshow:simple gallery and it is not working. see screenshot below. Should i be using a different code?

Hello, 

I'm having trouble with blank space under a gallery on mobile. 

https://www.treasuredtreatsidaho.com/gallery

Thank you for your help!

Kelsey

16 hours ago, KelseyLenz said:

Hello, 

I'm having trouble with blank space under a gallery on mobile. 

https://www.treasuredtreatsidaho.com/gallery

Thank you for your help!

Kelsey

Add to Design > Custom CSS

/* Mobile gallery space */
@media screen and (max-width:767px) {
.fe-64c6b924703b8d0a93af42c1 {
    grid-template-rows: repeat(590,minmax(24px, auto)) !important;
}
}

8 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Mobile gallery space */
@media screen and (max-width:767px) {
.fe-64c6b924703b8d0a93af42c1 {
    grid-template-rows: repeat(590,minmax(24px, auto)) !important;
}
}

 

You're the absolute best, thank you!

On 7/31/2023 at 8:32 AM, Mary_DG said:

Thank you again, Tuanphan, it worked great on hellocinnamon.com site. It is perfect. 

But I tried using the same code in our other website: www.aelo.ai

slideshow:simple gallery and it is not working. see screenshot below. Should i be using a different code?

 

 

Can you share link to this page?

On 7/29/2023 at 8:27 PM, Ernest said:

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,

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?