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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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 Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Lightbox Studio pluginIf you find my answer fit your need, 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment