lulu.lindberg Posted June 3, 2022 Share Posted June 3, 2022 Site URL: https://www.kelseynaef.com/services On mobile, the gallery carousels are tiny, i'd like to increase the height and lose the padding on mobile, so you can better see the photos. (Stuck using 7.0 until the plan expires) Thanks in advance! Link to comment
tuanphan Posted June 3, 2022 Share Posted June 3, 2022 You mean Your Family Carousel? 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
lulu.lindberg Posted June 6, 2022 Author Share Posted June 6, 2022 @tuanphan yes, all three of them there. Link to comment
tuanphan Posted June 11, 2022 Share Posted June 11, 2022 On 6/6/2022 at 8:58 PM, lulu.lindberg said: @tuanphan yes, all three of them there. Hi. It looks like you figured it out? Can you share solution for other members? 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
lulu.lindberg Posted June 14, 2022 Author Share Posted June 14, 2022 (edited) On 6/10/2022 at 11:31 PM, tuanphan said: Hi. It looks like you figured it out? Can you share solution for other members? I think it was this that did it, in custom CSS: /* remove carousel padding mobile */ @media screen and (max-width:767px) { div#block-e1c3c7b86e9d357920ab, div#block-yui_3_17_2_1_1612907473266_5403, div#block-yui_3_17_2_1_1613242503376_18794 { padding: 0px !important; }} I also have this in there, I'm not sure if it does anything. @media screen and (max-width:767px) { .services { .sqs-gallery-design-strip { overflow: visible; height: 200%; } }} @tuanphan Edited June 14, 2022 by lulu.lindberg tuanphan 1 Link to comment
TangerineStudio Posted August 2, 2022 Share Posted August 2, 2022 Hi I'm having this problem too - Gallery carsouel is really small on mobile as you can see here. Tried various bits of code and cant seem to crack it, any help please. @tuanphan Link to comment
tuanphan Posted August 4, 2022 Share Posted August 4, 2022 On 8/2/2022 at 5:13 PM, TangerineStudio said: Hi I'm having this problem too - Gallery carsouel is really small on mobile as you can see here. Tried various bits of code and cant seem to crack it, any help please. @tuanphan Hi. What is site url? 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
TangerineStudio Posted August 4, 2022 Share Posted August 4, 2022 @tuanphan Ive direct messaged you Link to comment
MrJC Posted May 1, 2023 Share Posted May 1, 2023 I believe that I am having this problem as well? As the width of my screen shrinks the height of my images in a carousel shrinks (making the images very small on a mobile device). I have tried the above advice and the best effect I can have is to keep the overall height of the gallery tall (ex: min-height: 150px, 30vh, etc.) however the images in that carousel gallery still shrink while the gallery height respects the limits. This creates a large blank buffer (padding? I'm not sure the term) below the images when they top justify. https://www.allyall.ca/built (down at the bottom of the page "Previous Work") @media screen and (max-width:767px) { #block-yui_3_17_2_1_1675529450534_14167{ overflow: visible; height: 300px; } } I've tried doing both specific block ids and generic: Also I am not sure if it is relevant but I have the following code that adds padding, which when I turn it off doesn't seem to effect it. /*Spaces between Carousel Gallery Images*/ .sqs-gallery-design-strip-slide { padding-right:10px; margin-left:10px; margin-top:0px; margin-bottom:0px; border-right: 1px solid #dcdcdc; } Link to comment
tuanphan Posted May 3, 2023 Share Posted May 3, 2023 On 5/1/2023 at 9:35 PM, MrJC said: I believe that I am having this problem as well? As the width of my screen shrinks the height of my images in a carousel shrinks (making the images very small on a mobile device). I have tried the above advice and the best effect I can have is to keep the overall height of the gallery tall (ex: min-height: 150px, 30vh, etc.) however the images in that carousel gallery still shrink while the gallery height respects the limits. This creates a large blank buffer (padding? I'm not sure the term) below the images when they top justify. https://www.allyall.ca/built (down at the bottom of the page "Previous Work") @media screen and (max-width:767px) { #block-yui_3_17_2_1_1675529450534_14167{ overflow: visible; height: 300px; } } I've tried doing both specific block ids and generic: Also I am not sure if it is relevant but I have the following code that adds padding, which when I turn it off doesn't seem to effect it. /*Spaces between Carousel Gallery Images*/ .sqs-gallery-design-strip-slide { padding-right:10px; margin-left:10px; margin-top:0px; margin-bottom:0px; border-right: 1px solid #dcdcdc; } You mean this? 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
nmbenson1 Posted February 13 Share Posted February 13 Hello @tuanphan and others in this thread. I am working on trying to solve a related issue within the Brine template for summary blocks, the above code suggestions are not working for me. I'm happy with the size on desktop but the summary blocks become very small on mobile, the same result happens if I try to switch to a carousel - I would prefer to keep the summary block because of the where the arrow nav is. I'd be fine with the summary blocks displaying only one image on mobile to help with the scale. URL: mwlit.com/galleryfull *this page is unlinked on the site PW: Dev This is around the scale that I am hoping to get the images on mobile: mwlit.com/illustration I would be super grateful for any help, thank you! Link to comment
tuanphan Posted February 15 Share Posted February 15 Not possible to change Summary Carousel to 1 item/mobile, you can use this CSS code to increase items size a bit @media screen and (max-width:767px) { body#collection-5a7cd14cc83025883fd43257 { .summary-thumbnail.img-wrapper { padding-bottom: 110% !important; } img.summary-thumbnail-image.loaded { width: 100% !important; height: auto !important; top: 0 !important; left: 0 !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
nmbenson1 Posted March 5 Share Posted March 5 @tuanphan Really appreciate the help here, this is an improvement! tuanphan 1 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