ZAMPM Posted March 30 Share Posted March 30 (edited) 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 March 30 by ZAMPM Link to comment
Ziggy Posted March 30 Share Posted March 30 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
ZAMPM Posted March 30 Author Share Posted March 30 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 Ziggy Posted March 30 Solution Share Posted March 30 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
ZAMPM Posted March 31 Author Share Posted March 31 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! Ziggy 1 Link to comment
Ziggy Posted March 31 Share Posted March 31 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
kenincalgary Posted November 18 Share Posted November 18 Is there a way to do this for the images in the gallery store? The mobile view doesn't show the full image: https://artmagik.ca/gallerystore/p/the-steeples Thanks so much! Ken 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