ksachse Posted September 23, 2022 Share Posted September 23, 2022 Site URL: https://casa-design-la.squarespace.com/home I'm currently working on a page that features a Gallery block with Carousel setting. By default the block looked great on desktop, but teeny tiny on mobile. I added the below code to adjust the height of the images and mobile looks much better, but now on desktop I'm seeing side overlap from the images next to what's being featured. The amount of overlap differs with each new featured image, and it's not always only on the right side. Any thoughts on how to fix? Site URL referenced, pw: casa /* Enlarge Gallery Carousel block for mobile -- turned off arrows */ .sqs-gallery-design-strip { position: relative; overflow: hidden; min-height: 500px; } Kaila S Shopify Partner, Squarespace Circle Member & MailChimp Expert yumari digitalwebsites · email campaigns · ads · social media · graphic design Link to comment
Solution tuanphan Posted September 24, 2022 Solution Share Posted September 24, 2022 You can add query code to make code run on mobile only @media screen and (max-width:767px) { /* Enlarge Gallery Carousel block for mobile -- turned off arrows */ .sqs-gallery-design-strip { position: relative; overflow: hidden; min-height: 500px; } } ksachse 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ksachse Posted September 26, 2022 Author Share Posted September 26, 2022 On 9/24/2022 at 1:47 AM, tuanphan said: You can add query code to make code run on mobile only @media screen and (max-width:767px) { /* Enlarge Gallery Carousel block for mobile -- turned off arrows */ .sqs-gallery-design-strip { position: relative; overflow: hidden; min-height: 500px; } } That worked, thank you! Kaila S Shopify Partner, Squarespace Circle Member & MailChimp Expert yumari digitalwebsites · email campaigns · ads · social media · graphic design Link to comment
mbockmaster Posted January 17 Share Posted January 17 On 9/24/2022 at 4:47 AM, tuanphan said: You can add query code to make code run on mobile only @media screen and (max-width:767px) { /* Enlarge Gallery Carousel block for mobile -- turned off arrows */ .sqs-gallery-design-strip { position: relative; overflow: hidden; min-height: 500px; } } Hi @tuanphan! I was hoping I could reuse this code to do the opposite—I'd like to make my gallery smaller on mobile. I've gotten close with the following code, but the gallery images crop from the bottom rather than using my focal points. .sqs-gallery-container { position: relative; overflow: hidden; max-height: 40vh; } I'd so appreciate any thoughts! https://fife-sunflower-68mk.squarespace.com/spa-menu pw: elipsis Link to comment
tuanphan Posted January 20 Share Posted January 20 On 1/17/2024 at 10:29 PM, mbockmaster said: Hi @tuanphan! I was hoping I could reuse this code to do the opposite—I'd like to make my gallery smaller on mobile. I've gotten close with the following code, but the gallery images crop from the bottom rather than using my focal points. .sqs-gallery-container { position: relative; overflow: hidden; max-height: 40vh; } I'd so appreciate any thoughts! https://fife-sunflower-68mk.squarespace.com/spa-menu pw: elipsis Removed code & use this code @media screen and (max-width:767px) { div#block-yui_3_17_2_1_1703002667545_5773, div#block-yui_3_17_2_1_1703002667545_5773 .slide { height: 300px !important; } div#block-yui_3_17_2_1_1703002667545_5773 a[role="button"] { top: 20% !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
charlineca Posted February 15 Share Posted February 15 Hi @thuanplan, I tried to use your code and it works, but my "box" where the images are in is still full size (leaving huge spacing at the bottom), and the arrows are not centered in the middle of the image anymore. Any way to fix this? Link to comment
tuanphan Posted February 17 Share Posted February 17 On 2/15/2024 at 3:34 PM, charlineca said: Hi @thuanplan, I tried to use your code and it works, but my "box" where the images are in is still full size (leaving huge spacing at the bottom), and the arrows are not centered in the middle of the image anymore. Any way to fix this? Try using Classic Editor Section for this section Or can you share link to page? We can check easier Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) 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