Osman01 Posted December 29, 2022 Share Posted December 29, 2022 (edited) 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 January 8 by Osman01 Link to comment
tuanphan Posted December 30, 2022 Share Posted December 30, 2022 Add to Design > Custom CSS @media screen and (max-width:767px) { .gallery-fullscreen-slideshow { height: 30vh !important; } } _yohandeschamps_ and Osman01 2 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Osman01 Posted December 30, 2022 Author Share Posted December 30, 2022 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 Link to comment
Solution tuanphan Posted January 3 Solution Share Posted January 3 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 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Osman01 Posted January 4 Author Share Posted January 4 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment