Jump to content

Stop portrait gallery images from being cropped on mobile

Recommended Posts

site: https://www.amethystwallgallery.com/

pass: Help123!

Hi, 

On the mobile version of my site, I have a fullscreen gallery with portrait images on my homepage. Whatever the size of device (or window, while I'm working on the site on desktop), there is some degree of crop on the width of the image. I am trying to make it so that the full height and width of the portrait images are uncropped (so the image size scales with screen size while keeping it's intended aspect ratio) but I cannot figure out the right way to do this with CSS. I have managed to do it for a landscape gallery on the desktop version of my site, but yeah I cannot figure out doing the same for a portrait gallery for some reason.

Please help me, much more capable people!

Below is an example:

image.thumb.png.02e0d4f31d9e9e3a8c5a882f7f2e5883.png

The one on the right is still slightly cropped but much less so than the one on the left.

Link to comment

Can you pinpoint where on your website this gallery is? Thanks!
Are all of the images the same portrait ratio? Or do they vary?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
1 minute ago, Ziggy said:

Can you pinpoint where on your website this gallery is? Thanks!
Are all of the images the same portrait ratio? Or do they vary?

The gallery is on the initial page when you enter my site, when the window is 768px or less so it only appears on mobile. The images are all the same portrait ratio at the moment yes, would it be problematic if I put in different portrait ratio images in the future?

Link to comment

I only see the landscape orientation Squarespace placeholder images on this page: https://www.amethystwallgallery.com/

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment

Interesting setup!

You'll want to set the section height to 150vw i.e. 150% of the viewport width. If you have different ratio images they will crop, we can only realistically adjust it for one ratio.

@media only screen and (max-width:768px) {
  section[data-section-id="63798eeaee080368d89450b5"] .gallery-fullscreen-slideshow {
    height:150vw !important;
  }
}

Let me know if that works.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

Link to comment
6 minutes ago, Ziggy said:

Interesting setup!

You'll want to set the section height to 150vw i.e. 150% of the viewport width. If you have different ratio images they will crop, we can only realistically adjust it for one ratio.

@media only screen and (max-width:768px) {
  section[data-section-id="63798eeaee080368d89450b5"] .gallery-fullscreen-slideshow {
    height:150vw !important;
  }
}

Let me know if that works.

Haha sorry that it was a bit of an ordeal to start working on 😅

That works perfectly, thank you so much! I can work around using just that aspect ratio no problems at all, I'm just so glad to have a solve so thank you again!

Link to comment

No problem! I set the height for a 2:3 image ratio (150%) if you switch to a 3:4, 4:5 or 9:16 change the 150% to 133.33%, 125% or 177.77% respectively.

Edited by Ziggy

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 

  Did I help? Buy me a coffee?

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

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.