Jump to content

Slideshow:Full on mobile view is cropped. How to fit image on screen?

Go to solution Solved by tuanphan,

Recommended Posts

Hiya!,

I've finished completing my website for the desktop view. I'm happy with how it is. My only issue is the mobile view.

I'm using slideshow:full on my desktop on pages "Professional & University" when viewed on mobile the slideshow is cropped.

 

I'm also using hover in and out effects in the Design>Custom CSS using the code below. 

//Zoom In Smooth//
.gallery-fullscreen-slideshow-item img:hover{height:100%!important; width:100%!important; transform:Scale(1.15);
overflow:hidden!important; transition-duration:3s}
.gallery-fullscreen-slideshow-item{overflow:hidden!important}

//Zoom Out Smooth//
.gallery-fullscreen-slideshow-item img {
transition: .8s ease;}

Can someone please advise how I can fix this issue on the mobile view?. How do I fit the slideshow to the extent of the screen?. Or if possible disable mobile view altogether.

Site:https://osman-b-zaman.squarespace.com

Pass: Aries

Kind Regards

Edited by Osman01
Link to comment

Thx tuanphan,

I can confirm this works. I tweaked the height value from 30vh to 23vh to see more of the image.

The only problem I can see is when you rotate the phone to landscape view it crops from both sides vertically.

Like the image below. How would I proceed to have it show uncropped in the landscape view as well?.

Kind Regards

 

image.png

Link to comment
  • Solution
On 12/30/2022 at 9:51 PM, Osman01 said:

Thx tuanphan,

I can confirm this works. I tweaked the height value from 30vh to 23vh to see more of the image.

The only problem I can see is when you rotate the phone to landscape view it crops from both sides vertically.

Like the image below. How would I proceed to have it show uncropped in the landscape view as well?.

Kind Regards

 

 

 

image.png

With landscape version, use this code

@media screen and (max-width:767px) and (orientation:landscape) {
.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

Thx works wonders. Slightly tweaked the values in green.

//Fit on Mobile Portrait//
@media screen and (max-width:767px) {
.gallery-fullscreen-slideshow {
    height: 23vh !important;
}
}

//Fit on Mobile Landscape//
@media screen and (max-width:767px) and (orientation:landscape) {
.gallery-fullscreen-slideshow {
    height: 90vh !important;
}
}

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.