Nimay Posted October 26, 2023 Share Posted October 26, 2023 Hi everyone, I am trying to move the navigation arrows in my carousel more to the side so that they don't overlap with the actual carousel slides. Since this is not possible within the basic editor I have tried to achieve it using CSS but have not found a solution so far. The only thing I have done so far is adding a margin to the section (see code below). But this now just allows me to move the arrows to the edge of the carousel section (red lines in the attached picture). I would like to have the arrows outside of the section or have a margin/padding of the slides within the section so that the I can move the arrows within that frame. section[data-section-id="62d8f41af11c953b83ab81a4"] { margin-left: 10vw; margin-right: 10vw; } Any suggestions? URL: https://plane-llama-a88g.squarespace.com/myxoees PW: myxobacteria Thanks a lot for your help in advance! Link to comment
melody495 Posted October 27, 2023 Share Posted October 27, 2023 Hi, probably don't want to change the section margin. Try the below code in your custom css? // makes the slideshow part smaller .user-items-list-carousel__gutter { padding-left: 10vw; padding-right: 10vw; } // Gives more padding between the arrows and the edge of the container .user-items-list-carousel__arrow-wrapper--left { padding-left: 2%; } user-items-list-carousel__arrow-wrapper--right { padding-right: 2%; } Let me know how it goes. tuanphan 1 -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
Nimay Posted November 1, 2023 Author Share Posted November 1, 2023 Hi @melody495, Thanks a lot for your answer! I have tried adding your code but unfortunately it does not make the slideshow part smaller. The only thing that was changed was moving the left arrow a bit more inside. I was wondering how I can find out what the proper element name is of a specific element that I am trying to change (i.e. ".user-items-list-carousel__gutter"). Is there a way to know which is the correct name for a specific element? Since the padding changes of your code were not performed I assume that the element name may be incorrect? Curious about your suggestions! Nicola Link to comment
Solution melody495 Posted November 1, 2023 Solution Share Posted November 1, 2023 (edited) @Nimay I tested this on your website, so these are the elements on your website. Can you add !important after each of the css styling and see? Below new code // makes the slideshow part smaller .user-items-list-carousel__gutter { padding-left: 10vw !important; padding-right: 10vw !important; } // Gives more padding between the arrows and the edge of the container .user-items-list-carousel__arrow-wrapper--left { padding-left: 2% !important; } user-items-list-carousel__arrow-wrapper--right { padding-right: 2% !important; } Let me know how it goes. Edit: to answer your question on how to find your element name, you right click on the component and click inspect, you'll see the html. If you're not familiar with it then you'll need to read up on it, and be mindful of the parent/child relationships and how they behave, and some best practice. Edited November 1, 2023 by melody495 -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like coffee (Thank you) Link to comment
Nimay Posted November 1, 2023 Author Share Posted November 1, 2023 Hi @melody495 The !important addition indeed solved it! (plus adding the missing dot in the last paragraph before user-items... ) 🙂 Thanks a lot for your help! And also for the comment regarding finding element names. Cheers, Nicola Link to comment
melody495 Posted November 1, 2023 Share Posted November 1, 2023 10 minutes ago, Nimay said: The !important addition indeed solved it! (plus adding the missing dot in the last paragraph before user-items... ) 🙂 Ah good spot about the missing dot! that was probably the issue. You are welcome 🙂 glad it worked for you. -------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification Melody | Squarespace Nerd 💻 💁♀️ 1-2-1 Squarespace Training session <- feeling stuck and want to learn? 👩💻 💁♀️ Website help <- send me your to-do list. From code to plugin to domain setup. 🧰 See the tools I use (contain affiliate links) ☕ Did I help? I like 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