riddle129 Posted April 18, 2022 Share Posted April 18, 2022 Site URL: https://gazelle-vibraphone-798g.squarespace.com I am having trouble setting the correct code to fix the mobile image sizing, margins/padding of a gallery slideshow on my home page in Squarespace 7.1. On mobile these images are getting cropped. I want the full image displayed. I have read through several posts on this and have tried using the following code inside Design>Custom CSS with no success. @media screen and (max-width:767px) { body#collection-625721445aa78c2d0936faf0 { .gallery-slideshow-item img { width: 120% !important; left: 50% !important; transform: translateX(-50%); } .gallery-slideshow-item-src { overflow: visible; }} } Here is home page... URL: gazelle-vibraphone-798g.squarespace.com pw: ohboyohboy Gallery Slideshow: Full Width: Full Autoplay: On Animation: Scale Down Thanks in advance, -Rob Link to comment
Beyondspace Posted April 18, 2022 Share Posted April 18, 2022 1 hour ago, riddle129 said: Site URL: https://gazelle-vibraphone-798g.squarespace.com I am having trouble setting the correct code to fix the mobile image sizing, margins/padding of a gallery slideshow on my home page in Squarespace 7.1. On mobile these images are getting cropped. I want the full image displayed. I have read through several posts on this and have tried using the following code inside Design>Custom CSS with no success. @media screen and (max-width:767px) { body#collection-625721445aa78c2d0936faf0 { .gallery-slideshow-item img { width: 120% !important; left: 50% !important; transform: translateX(-50%); } .gallery-slideshow-item-src { overflow: visible; }} } Here is home page... URL: gazelle-vibraphone-798g.squarespace.com pw: ohboyohboy Gallery Slideshow: Full Width: Full Autoplay: On Animation: Scale Down Thanks in advance, -Rob Try @media only screen and (max-width: 767px) { section[data-section-id="625989ca8596b1055dbd3490"] img { height: auto !important; } section[data-section-id="625989ca8596b1055dbd3490"] .gallery-fullscreen-slideshow-list { height: 100% !important; } section[data-section-id="625989ca8596b1055dbd3490"] .gallery-fullscreen-slideshow { height: 30vh !important; } } Let me know how it works on your site riddle129 1 BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
Beyondspace Posted April 18, 2022 Share Posted April 18, 2022 My testing BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
riddle129 Posted April 18, 2022 Author Share Posted April 18, 2022 20 minutes ago, bangank36 said: Try @media only screen and (max-width: 767px) { section[data-section-id="625989ca8596b1055dbd3490"] img { height: auto !important; } section[data-section-id="625989ca8596b1055dbd3490"] .gallery-fullscreen-slideshow-list { height: 100% !important; } section[data-section-id="625989ca8596b1055dbd3490"] .gallery-fullscreen-slideshow { height: 30vh !important; } } Let me know how it works on your site This was perfect. I had been trying using the collection ID, not the section ID you included in the code. Thank you! Link to comment
Beyondspace Posted April 18, 2022 Share Posted April 18, 2022 You can use the following extension: https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff?hl=en to get the right id BeyondSpace - Squarespace Website Developer 🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox) 🗓️ Delivery Date Picker (Squarespace Date format) 💫 Animated Buttons (Referral URL) 🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations) 🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates) If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you! Link to comment
riddle129 Posted May 31, 2022 Author Share Posted May 31, 2022 Follow up question. Your code for the galley slideshow on my homepage has been scaling correctly on mobil devices. Unfortunately, when viewing on desktop with a narrowed browser window the image stops scaling and crops. I hope you can help again. Link to comment
tuanphan Posted June 1, 2022 Share Posted June 1, 2022 17 hours ago, riddle129 said: Follow up question. Your code for the galley slideshow on my homepage has been scaling correctly on mobil devices. Unfortunately, when viewing on desktop with a narrowed browser window the image stops scaling and crops. I hope you can help again. It looks fine on my Laptop/Mobile With tablet, it appear problem, you can use this code for tablet @media screen and (max-width:1024px) { .gallery-fullscreen-slideshow { height: 35vh !important; } } riddle129 1 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
riddle129 Posted June 1, 2022 Author Share Posted June 1, 2022 8 hours ago, tuanphan said: It looks fine on my Laptop/Mobile With tablet, it appear problem, you can use this code for tablet @media screen and (max-width:1024px) { .gallery-fullscreen-slideshow { height: 35vh !important; } } @tuanphan Thank you. I replaced the previous Custom CSS with your code and it appears to be publishing correctly on different desktop browsers and on mobile. I will check tablet shortly. Link to comment
MakingWaves Posted October 2 Share Posted October 2 Hi. I'm also trying to adjust the height of the slideshow gallery to fit the full height on both mobile and portrait tablet. I've tried everything I can find on here but nothing seems to work. Can anyone help please? Thanks in advance. https://www.nikkirees.com/ Link to comment
tuanphan Posted October 6 Share Posted October 6 On 10/2/2023 at 5:57 PM, MakingWaves said: Hi. I'm also trying to adjust the height of the slideshow gallery to fit the full height on both mobile and portrait tablet. I've tried everything I can find on here but nothing seems to work. Can anyone help please? Thanks in advance. https://www.nikkirees.com/ You mean remove this white space to make gallery fullheight? 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
MakingWaves Posted October 6 Share Posted October 6 (edited) Hey Tuan. Yes, although it's not really a problem on mobile now I've made some changes, it's the desktop display that looks odd now. I've coded the captions to display over the gallery images but a redundant gap now sits below where the captions would normally feature. Any help would be really appreciated, thanks. Edited October 6 by MakingWaves Link to comment
tuanphan Posted October 9 Share Posted October 9 Try this CSS code .gallery-fullscreen-slideshow { margin-bottom: 20px !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
MakingWaves Posted October 9 Share Posted October 9 2 hours ago, tuanphan said: Try this CSS code .gallery-fullscreen-slideshow { margin-bottom: 20px !important; } Perfect, thanks Tuan 🙂 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