Jump to content

Moving Mobile Arrows on Carousel Auto-Layout Section

Go to solution Solved by tuanphan,

Recommended Posts

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

 

Link to comment
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?

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
  • 3 weeks later...
  • Solution
On 8/10/2021 at 4:42 AM, whereisscott said:

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

 

Thank you!

Try adding to Design > Custom CSS

/* Carousel auto arrows */
@media screen and (max-width:767px) {
.user-items-list-carousel .desktop-arrows {
    display: flex !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}
.mobile-arrows {
    display: none !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
  • 4 months later...
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

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

image.thumb.png.9c12f6b209817abd11a4ee301cbce747.png

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

 

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.