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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.