Jump to content

Large + cropped slideshow images on mobile

Recommended Posts

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

 

Link to comment
  • Replies 4
  • Views 597
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 8 months later...

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

 

SiteErrorMobile.jpg

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

 

SiteErrorMobile.jpg

Try this code

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (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.