reduce padding / move carousel list button and arrows up

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

bumped, please any help would be so amazing

try this. Seems like a whole bunch of extra margin down there. You could also change that 0 to another number. The default was 20%.

.user-items-list-carousel__media-container {
  margin-bottom: 0 !important;
}

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 much

@tuanphan is there any possibility you'd be able to help me on this pretty please? i would really appreciate it, I just can't figure it out with any of the code i'm already using 😧

www.kathrynbraunton.co.uk

pw: makeup

scroll down on about me page - client kind words carousel

bumped 

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

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? 

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

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 

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 

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

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?