Jump to content

Slideshow Cropping on Mobile

Recommended Posts

Site URL: https://www.thewinchestercopywriter.co.uk/portfolio/university

I'm using two reel slideshow galleries on a page.  The first works fine but on the second the images are all cropped on mobile view.  I assume it's because the images in the second are more square, but I'd prefer them to resize dynamically instead of being cropped at all.  The desktop view follows my rules of using an inset gallery but the mobile view seems to enforce a full bleed effect with cropping.

https://www.thewinchestercopywriter.co.uk/portfolio/university

I've added code to address the height of the gallery that I've seen on other forum posts here but that's just resulted in the images getting more cropped.

I've add this code to the CSS which has resized the second gallery to fit and moved it more central, but has created gaps between the images.

@media(max-width:767px) {
.gallery-reel {
     padding-top: 30px !important;
    padding-bottom: 50px !important;
}
  
    .gallery-reel-item img {
    left: 40px !important;
    width: 80% !important;
    height: auto !important;
}
}

Ideally they should all be side by side without gaps and without any of the image cropped, in the same way as on the Desktop view.

 

Desktop View:

38983565_Screenshot2021-03-26182031.thumb.JPG.d8f0919df0ee6247a30dcc967fe6fcae.JPG

 

Mobile view without any CSS (cropped image):

1880475364_Screenshot2021-03-26182408.JPG.5d01652d9e1033919c5376613ed16ff8.JPG

 

Mobile view with resizing CSS (gaps and too much padding):

2109345845_Screenshot2021-03-26182251.JPG.cde0c861f74a8d8860b5ee1baf375644.JPG

Edited by WinchesterCopywriter
Link to comment

Hi,

Can you remove your code please, and I'll send you new code.

Also can you confirm do you want gaps between the slides in slideshow 1, but no gaps in slideshow 2? Or do you not want gaps in either of the slideshows (for mobile)?

Also, are there any other differences between the 2 slideshows you require? Just so I can get a feel for exactly what you want 🙂 

 

Link to comment

Hmmm yeah, I had no luck with that. I've only been doing css code a few months and I expected the object-fit: contain property to work but it doesn't, looks like its guided by the actual slideshow height container it sits in or indeed the image dimensions themselves.

If you reduce the height value of your 2nd slideshow within SS it may solve the issue. Worth tweaking the slideshow settings see what's achievable. 

I assume you must have other code applied on that page as the gallery control buttons go all awry as soon as you hit the mobile breakpoint? The below code fixes your padding issues with the control buttons

@media(max-width:767px) {
[data-section-id="605df562453e7b619329a05c"] .content-wrapper {
padding-top: 50px;
padding-bottom: 40px
}
}

After that I had a bit play with altering that cropping issue on the second slideshow, and closest I got was this. At 624 pixels is where you see the images first starting to be cropped.

@media(max-width:767px) {
[data-section-id="605df562453e7b619329a05c"] .content-wrapper {
padding-top: 50px;
padding-bottom: 40px
}
}

@media(max-width:624px) {
[data-section-id="605df562453e7b619329a05c"] .gallery-reel-item img {
height: 51vh;
object-fit: contain!important;
    }
[data-section-id="605df562453e7b619329a05c"] .gallery-reel, .gallery-reel-controls {
padding-bottom: 90px!important;
}
}

@tuanphan will be able to confirm, he's the expert 🙂

Sorry I couldn't help more.

Link to comment
On 3/29/2021 at 4:30 PM, WinchesterCopywriter said:

Thank you! I've removed my code.  Ideally I'd like the mobile view to behave exactly like the desktop one - no gaps on both slideshows and without any cropping occurring on the second one.

Do you still need help on this?

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
On 4/1/2021 at 5:15 PM, WinchesterCopywriter said:

Yes please!

Hi. Try adding this to Design > Custom CSS > Then save & reload your site

/* reels on mobile */
@media screen and (max-width:767px) {
.gallery-reel {
    height: 40vh !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.