Jump to content

Mobile Carousel Arrows Alignment

Go to solution Solved by inside_the_square,

Recommended Posts

Posted

Hi! I was hoping someone could help me with this maybe with some simple code if not possible in the settings. I am looking to make these arrows left justified on mobile instead of being in the center like it is now. See the screenshot attached. Thanks in advance! Also, this is an image carousel. 

Screen Shot 2024-01-01 at 10.58.47 PM.png

Posted

While you are looking at it can you also help me make the image clickable in that same carousel? I have buttons underneath that go to the page but I also want the image to go to that same page. Thanks!

  • 3 months later...
  • Solution
Posted

Hey @octolove - it looks like you moved the arrows to the center of the images in your carousel list section, but I wanted to hop in here and provide a left align solution for anyone looking for that! This code will scoot those arrows to the left on mobile devices: 

@media screen and (max-width: 575px) {
    .user-items-list-carousel .mobile-arrows {
        justify-content: flex-start;
    }
}

 

🤓 Creator of InsideTheSquare.co
SQUARESPACE CIRCLE LEADER SQUARESPACE EXPERT SQUARESPACE EMPLOYEE EDUCATOR CERTIFIED CUSTOM CODE EXPERT

🗺️ New to Squarespace? Get your free roadmap: insidethesquare.co/roadmap
🙋‍♀️ New to CSS? Learn the basics for free: insidethesquare.co/learn
️ Ready to go pro? Get my custom code collection: insidethesquare.co/css

 

BeccaHarpain.gif.236d6ddd88c7d637645b762799f501a8.gif

 

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.