Moving Mobile Arrows on Carousel Auto-Layout Section

Site URL: https://kale-penguin-3t5z.squarespace.com/

Hi all,

I'm designing a new website using the new Auto-Layout section in a carousel layout as a testimonial slider.  However, I don't like how the mobile arrows are so far down, on the very bottom of the section (and therefore underneath the testimonial).  I've tried to move them up with CSS, but the actual container itself won't seem to budge.  Would love to get these towards the top, on either side of the photos.  Any help would be appreciated!

Website: https://kale-penguin-3t5z.squarespace.com/
Password: danacoaching

Section in question: testimonials on homepage towards the bottom of the page

Thank you!

Best,
-Scott

On 7/24/2021 at 2:45 AM, whereisscott said:

Site URL: https://kale-penguin-3t5z.squarespace.com/

Hi all,

 

I'm designing a new website using the new Auto-Layout section in a carousel layout as a testimonial slider.  However, I don't like how the mobile arrows are so far down, on the very bottom of the section (and therefore underneath the testimonial).  I've tried to move them up with CSS, but the actual container itself won't seem to budge.  Would love to get these towards the top, on either side of the photos.  Any help would be appreciated!

Website: https://kale-penguin-3t5z.squarespace.com/
Password: danacoaching

Section in question: testimonials on homepage towards the bottom of the page

Thank you!

Best,
-Scott

 

Incorrect password. Can you check it again?

So sorry Tuan - typo. It's "daracoaching"

Thank you!

@tuanphan You're a genius - thank you!  I see what you did there - very smart.  I couldn't for the life of me figure out how to get the mobile arrows to move, so this is perfect.  Thank you again!

@tuanphanI'm using this code but 0 takes the arrows all the way to the margins and any other number takes them to almost touching the text. Is there a middle ground? Also is there a way to change the vertical position? Thank you!

On 12/23/2021 at 10:47 AM, RikkiG said:

@tuanphanI'm using this code but 0 takes the arrows all the way to the margins and any other number takes them to almost touching the text. Is there a middle ground? Also is there a way to change the vertical position? Thank you!

Can you share link to page where you use carousel layout? We can check easier

@tuanphan at the bottom of this page: https://www.estebanroa.com/sound-meditation

The changes I was trying to make were mainly for mobile view. 

21 hours ago, RikkiG said:

@tuanphan at the bottom of this page: https://www.estebanroa.com/sound-meditation

The changes I was trying to make were mainly for mobile view. 

You mean make space between arrows - left/right side of screen??

@tuanphanyes, between arrows and sides of screen, but also maybe move them up toward the picture.

On 12/29/2021 at 2:31 AM, RikkiG said:

@tuanphanyes, between arrows and sides of screen, but also maybe move them up toward the picture.

Add to Design > Custom CSS

/* Sound mediation mobile arrows */
@media screen and (max-width:767px) {
body#collection-61b8cfc35f3dc275ac07ecc0 .user-items-list-carousel__arrow-icon-holder {
    align-items: flex-start;
    top: 10%;
    width: 90%;
    left: 50%;
    transform: translateX(-50%);
}
}