Large + cropped slideshow images on mobile

Site URL: https://www.stephhing.com/

Hi!

On every inner portfolio page on my website, the top image (which is a single image of a slideshow) is only being cropped on the sides on mobile, so that it is super tall.

How can I make all of these images throughout my website just scale down in size for mobile?

Here is an example page - but I have the same image on most pages of my website that I'd like to fix:

https://www.stephhing.com/work/mayfairhotel

On 8/25/2021 at 8:07 AM, stoofy said:

Site URL: https://www.stephhing.com/

Hi!

On every inner portfolio page on my website, the top image (which is a single image of a slideshow) is only being cropped on the sides on mobile, so that it is super tall.

How can I make all of these images throughout my website just scale down in size for mobile?

Here is an example page - but I have the same image on most pages of my website that I'd like to fix:

https://www.stephhing.com/work/mayfairhotel

 

Hi,

Try adding to Design > Custom CSS

@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 35vh !important;
}
}

Hi @tuanphan

Just jumping on this thread - I'm also having similar issues if you could please help?

https://greatdaindesign.com/clive_nobles-1

I applied/tweaked your fix which has worked on the gallery>full with the image with 2 bottles.
They're now cropped nicely on mobile, however every instance across the site of full/gallery now has a big empty white box beneath the gallery. See screengrab, this if from Android & iPhone.

The fix I applied below. What can I do to remove the white space?

Many thanks

@media screen and (max-width:767px) {
  
.gallery-fullscreen-slideshow-wrapper {
    height: 80vh !important;
}
}

11 hours ago, Phil_FD said:

Hi @tuanphan

Just jumping on this thread - I'm also having similar issues if you could please help?

https://greatdaindesign.com/clive_nobles-1

I applied/tweaked your fix which has worked on the gallery>full with the image with 2 bottles.
They're now cropped nicely on mobile, however every instance across the site of full/gallery now has a big empty white box beneath the gallery. See screengrab, this if from Android & iPhone.

The fix I applied below. What can I do to remove the white space?

Many thanks

@media screen and (max-width:767px) {
  
.gallery-fullscreen-slideshow-wrapper {
    height: 80vh !important;
}
}

 

Try this code

@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 80vh !important;
}
}

Worked, thanks so much!