Jump to content

Image Gallery gets cropped when on mobile view. How to Fix gallery "Height" only on just Mobile

Go to solution Solved by Ziggy,

Recommended Posts

Hello everyone I just finished my company's office website (https://www.zampolin.com/contact) and everything so far has been great but have one last item need major help with. On our Contact page, at the bottom, I added an image gallery "slideshow reel" that has a group photo of our office family. We will add more pictures here as time goes on and it looks great on a computer or larger screen. But when I go to our site on mobile, the group photo gets cropped cutting two people out of the photo. I have the gallery set to "inset" and I played around with the gallery "Height" in the "Edit Section". When I lower the height it does work and the group photo will fit the mobile view but when I return back to the desktop view it shows the gallery "slideshow reel as very tiny. Is there a way to control the height only on mobile? Can someone please help me get this correctly? 

Edited by ZAMPM
Link to comment

try adding this to Custom CSS:

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

You can adjust the value of 80vw (height = 80% of the window width, and 5x4 aspect ratio)

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

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

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

 Did I help? Buy me a coffee?

Link to comment

Hi Ziggy thank you for your reply. I just pasted that into the Custom CSS on the "design" tab and then saved and refreshed on my phone. Nothing seemed to change. the image still gets cut off on the sides. I then tried updating the 80vw to be 50vw and still nothing happened. Any other suggestions? really appreciate any help

Link to comment
  • Solution

Sorry, I think I used the wrong gallery type, try this:

@media only screen and (max-width:767px) {
  .gallery-reel {
      height:80vw !important;
  }
}

 

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

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

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

 Did I help? Buy me a coffee?

Link to comment
9 minutes ago, ZAMPM said:

Hi Ziggy! no need to apologize... It worked perfectly! Thank you very much for your knowledge and help with our website! You made our day just now. Have a fantastic weekend!

Thanks! You too!

If you can mark my post as the solution and give a thumbs up that would be much appreciated!

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

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

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

 Did I help? Buy me a coffee?

Link to comment
  • 7 months later...

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.