Jump to content

reduce padding / move carousel list button and arrows up

Recommended Posts

Hi there,

is there a way to to move my carousel list button in line with the arrows, and then reduce the padding above those elements?

I like the distance below the arrows from the bottom of the section, so need the button to move top-wards.

I want to reduce the gap above the button and arrows so that the content is closer together and therefor the section is shorter!

these changes are for desktop only, i like how it is on mobile 🙂

 

thank you so much !!

 

https://sponge-garlic-ds7r.squarespace.com/

pw: makeup

- about page, at the bottom, client kind words testimonials.

 

fluid engine, fe, 7.1

Edited by daniellenoakes
Link to comment

Hey @jaeveedee thank you for picking this up as always, that code was perfect for fixing hte size of the section, much better! I am still in need of a code that will be able to move the arrows up as they are still stuck in the section below, and now the image needs to be moved up into the center of the section. I would really appreciate any help!! thank you so muchScreenshot2023-10-10at10_40_45.thumb.png.f42154cbe50f97af462a38a62d0ac80c.png

Link to comment

Try CSS code like this to move 2 arrows up

section[data-section-id="6516bb8e262f7968a8826f2e"] .user-items-list-carousel .desktop-arrows {
    position: relative;
    top: -30px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 10/15/2023 at 6:20 AM, tuanphan said:

Try CSS code like this to move 2 arrows up

section[data-section-id="6516bb8e262f7968a8826f2e"] .user-items-list-carousel .desktop-arrows {
    position: relative;
    top: -30px;
}

 

this is amazing thank you so much!!!!!! is there similar for the image? 

 

 

 

Link to comment
On 10/16/2023 at 4:17 PM, daniellenoakes said:

this is amazing thank you so much!!!!!! is there similar for the image? 

 

 

 

Use this code

section[data-section-id="6516bb8e262f7968a8826f2e"] {
.user-items-list-carousel__media-inner {
    position: relative;
    top: -30px;
}
.user-items-list-carousel__slides-revealer {
    overflow: visible !important;
}
.user-items-list-carousel__gutter {
    overflow: visible;
}}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 10/18/2023 at 3:49 AM, tuanphan said:

Use this code

section[data-section-id="6516bb8e262f7968a8826f2e"] {
.user-items-list-carousel__media-inner {
    position: relative;
    top: -30px;
}
.user-items-list-carousel__slides-revealer {
    overflow: visible !important;
}
.user-items-list-carousel__gutter {
    overflow: visible;
}}

 

hey thank you so much for this, really appreciated. it works for the image perfectly, but is sadly now showing the edge of the next slide, see attached 

Screenshot 2023-10-19 at 11.31.24.png

Link to comment
On 10/19/2023 at 5:32 PM, daniellenoakes said:

hey thank you so much for this, really appreciated. it works for the image perfectly, but is sadly now showing the edge of the next slide, see attached 

Screenshot 2023-10-19 at 11.31.24.png

Parent elements have the overflow: hidden; This means that if the child element overflows the parent element, the overflow will be hidden.

If move the image up, it will overflow, and will be hidden. The solution is to turn off overflow hidden >> visible, but it will also create problems as you said.

Currently I don't have any idea.

You try posting a new thread, maybe someone can help

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 10/21/2023 at 1:10 PM, tuanphan said:

Parent elements have the overflow: hidden; This means that if the child element overflows the parent element, the overflow will be hidden.

If move the image up, it will overflow, and will be hidden. The solution is to turn off overflow hidden >> visible, but it will also create problems as you said.

Currently I don't have any idea.

You try posting a new thread, maybe someone can help

could we some how use nth child to hide it if not active or something like that? 

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.