Kate_B Posted June 15, 2023 Share Posted June 15, 2023 @tuanphan yes that's correct. Either move the arrows center underneath (as per your image above) or move them in a bit so they are not cut off the edges of the screen. See attached screenshot. Does that make sense? Link to comment
Kate_B Posted June 19, 2023 Share Posted June 19, 2023 @tuanphan do you think you'll be able to help with this? Link to comment
tuanphan Posted June 22, 2023 Share Posted June 22, 2023 On 6/19/2023 at 3:55 PM, Kate_B said: @tuanphan do you think you'll be able to help with this? I see you removed arrows on mobile. Do you still need help? 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
Kate_B Posted June 22, 2023 Share Posted June 22, 2023 @tuanphan yes I still need help. I added some code to make the summary blocks stack on mobile, but have removed that now and kept the original code (as pasted in my original comment). I am still needing some help with moving the arrows below and center for the summary blocks on mobile. Possibly also just having 1 item rather than 2 as well. See screenshot example attached. Any help would be greatly appreciated as I am a struggling with this one! Thank you 🙂 Link to comment
tuanphan Posted June 23, 2023 Share Posted June 23, 2023 On 6/22/2023 at 3:08 PM, Kate_B said: @tuanphan yes I still need help. I added some code to make the summary blocks stack on mobile, but have removed that now and kept the original code (as pasted in my original comment). I am still needing some help with moving the arrows below and center for the summary blocks on mobile. Possibly also just having 1 item rather than 2 as well. See screenshot example attached. Any help would be greatly appreciated as I am a struggling with this one! Thank you 🙂 Hi, Can you check it again? I don't see this section on https://gemini-alcott.squarespace.com/meet-the-stars 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
Kate_B Posted June 23, 2023 Share Posted June 23, 2023 @tuanphan sorry, that example was taken from the Learn page https://gemini-alcott.squarespace.com/learn There are multiple sections using summary blocks in the same way on the Learn and Meet the Stars pages. So I'm looking for code to update all summary blocks across both of these pages if that makes sense? Link to comment
Kate_B Posted June 27, 2023 Share Posted June 27, 2023 @tuanphan does my comment above make sense? If you need more details please let me know. thank you! Link to comment
tuanphan Posted June 28, 2023 Share Posted June 28, 2023 On 6/23/2023 at 4:55 PM, Kate_B said: @tuanphan sorry, that example was taken from the Learn page https://gemini-alcott.squarespace.com/learn There are multiple sections using summary blocks in the same way on the Learn and Meet the Stars pages. So I'm looking for code to update all summary blocks across both of these pages if that makes sense? Try adding to Page Header <style> @media screen and (max-width:767px) { .summary-carousel-pager .previous { top: unset !important; bottom: 0 !important; left: calc(50% - 60px) !important; } .summary-carousel-pager .next { top: unset !important; bottom: 0 !important; right: calc(50% - 60px) !important; } } </style> astroland https://gemini-alcott.squarespace.com/learn 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
Kate_B Posted June 30, 2023 Share Posted June 30, 2023 @tuanphan this worked great - thank you so much! Do you know how to adjust so only 1 item is showing instead of 2? Link to comment
tuanphan Posted July 1, 2023 Share Posted July 1, 2023 21 hours ago, Kate_B said: @tuanphan this worked great - thank you so much! Do you know how to adjust so only 1 item is showing instead of 2? Hi, I don't know this. It requires complex CSS + JavaScript code. I usually add 2 Summaries then show 1 on desktop, show another on mobile 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
Kate_B Posted July 4, 2023 Share Posted July 4, 2023 @tuanphan no worries! thank you so much for your help! Do you know if there's a way to increase the space between the arrows and titles so the arrows don't overlap? (rather than manually adjusting each one individually?) All of the related posts summary blocks at the end of all blog posts are appearing like this (see screenshot) Link to comment
tuanphan Posted July 4, 2023 Share Posted July 4, 2023 11 minutes ago, Kate_B said: @tuanphan no worries! thank you so much for your help! Do you know if there's a way to increase the space between the arrows and titles so the arrows don't overlap? (rather than manually adjusting each one individually?) All of the related posts summary blocks at the end of all blog posts are appearing like this (see screenshot) You can try change to bottom: -30px !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
Kate_B Posted July 4, 2023 Share Posted July 4, 2023 @tuanphan that worked perfectly. thank you so much for your help! 🙂 tuanphan 1 Link to comment
cassiepdx Posted October 22, 2023 Share Posted October 22, 2023 Hi, I am wondering what I need to change in my code to get the arrows to appear below the events, right now if the event description is too tall, the arrows end up over it. I need to fix this on desktop and mobile. //Summary carousel arrows .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { float: inline; width: 100%; position: absolute; bottom: -15%; left: 51%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 9; } .sqs-gallery-design-carousel .sqs-gallery-controls .next::before { background-color: #E14962; color: #fff; font-size: 20px !important; cursor: pointer; font-weight: bold; padding:24px 24px 24px 24px; box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5); } .sqs-gallery-design-carousel .sqs-gallery-controls .previous::before { background-color: #E14962; color: #fff; font-size: 20px !important; color: #fff; cursor: pointer; font-weight: bold; padding:24px 24px 24px 24px; box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5); } .sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { margin: 0 25px 20px 0 !important; } /* Summary arrows */ .sqs-gallery-design-carousel .sqs-gallery-container { position: relative; } div#block-yui_3_17_2_1_1679436822725_6064 .summary-carousel-pager { position: absolute; bottom: -10px !important; left: 50% !important; transform: translateX(-50%) !important; } @media screen and (max-width:767px) { .summary-carousel-pager .previous { top: unset !important; bottom: 0px !important; left: calc(60% - 60px) !important; } .summary-carousel-pager .next { top: unset !important; bottom: 0px !important; right: calc(55% - 60px) !important; } } Link to comment
tuanphan Posted October 24, 2023 Share Posted October 24, 2023 On 10/22/2023 at 10:34 AM, cassiepdx said: Hi, I am wondering what I need to change in my code to get the arrows to appear below the events, right now if the event description is too tall, the arrows end up over it. I need to fix this on desktop and mobile. //Summary carousel arrows .sqs-block-summary-v2 .summary-block-setting-design-carousel .summary-carousel-pager { float: inline; width: 100%; position: absolute; bottom: -15%; left: 51%; -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); transform: translate(-50%,-50%); -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; z-index: 9; } .sqs-gallery-design-carousel .sqs-gallery-controls .next::before { background-color: #E14962; color: #fff; font-size: 20px !important; cursor: pointer; font-weight: bold; padding:24px 24px 24px 24px; box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5); } .sqs-gallery-design-carousel .sqs-gallery-controls .previous::before { background-color: #E14962; color: #fff; font-size: 20px !important; color: #fff; cursor: pointer; font-weight: bold; padding:24px 24px 24px 24px; box-shadow: 1px 4px 5px rgba(0, 0, 0, 0.5); } .sqs-gallery-design-carousel .sqs-gallery-controls .next, .sqs-gallery-design-carousel .sqs-gallery-controls .previous { margin: 0 25px 20px 0 !important; } /* Summary arrows */ .sqs-gallery-design-carousel .sqs-gallery-container { position: relative; } div#block-yui_3_17_2_1_1679436822725_6064 .summary-carousel-pager { position: absolute; bottom: -10px !important; left: 50% !important; transform: translateX(-50%) !important; } @media screen and (max-width:767px) { .summary-carousel-pager .previous { top: unset !important; bottom: 0px !important; left: calc(60% - 60px) !important; } .summary-carousel-pager .next { top: unset !important; bottom: 0px !important; right: calc(55% - 60px) !important; } } Can you share link to this 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