Summary Block Carousel & Carousel Arrows

@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?

@tuanphan do you think you'll be able to help with this?

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?

@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 🙂

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

@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?

@tuanphan does my comment above make sense? If you need more details please let me know. thank you!

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

@tuanphan this worked great - thank you so much!  Do you know how to adjust so only 1 item is showing instead of 2? 

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

@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)

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;

@tuanphan that worked perfectly. thank you so much for your help! 🙂

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;
}
  }

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