Jump to content

Any one of you nice people know how to reposition list carousel images using CSS?

Recommended Posts

I'm creating my testimonials in a list carousel and would like the images of the people to overlap the card. I am having a heck of time. I've tried all sorts of codes (targeting the image/ the container using overflow and none of them work.)
 Does it have something to do with the section above because when I apply a negative margin value the images are obscured. 

I would be so grateful for even a CLUE on how to make this work?


(The password for the site is: me)

image.thumb.png.cda9f1df0fc315e72ffcca109215e023.png

Link to comment
  • Replies 5
  • Views 1.8k
  • Created
  • Last Reply

Top Posters In This Topic

  • 2 weeks later...
On 10/25/2023 at 2:41 AM, andreallevin said:

Add to Website Tools (under Not Linked) > Custom CSS

/* testimonial */
.user-items-list-item-container[data-section-id="64ee3fc86963f41f1d41ca12"] {
.user-items-list-carousel__media-container {
    position: absolute;
    top: -68px;
    z-index: 9999999;
    left: 50%;
    transform: translateX(-50%);
}
.user-items-list-carousel__gutter {
    overflow: visible;
}
li.user-items-list-carousel__slide {
    padding-top: 100px !important;
}}
body {
    overflow-x: hidden;
}

image.thumb.png.263233e9e5ed4f98fa8d8b323802c8ec.png

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
  • 5 months later...

Hello! I've just used this code on my site and it mostly works but the whole circle isn't showing (cut in half) in the testimonial section (middle of home page). I'm wondering if I could please get some help with this. TIA!

my site is: https://grouse-pepper-fl3e.squarespace.com/home
PW: 123

This is the code I currently have:

/* testimonial */
.user-items-list-item-container[data-section-id="6620f888fb5a3200413e988f"] {
.user-items-list-carousel__media-container {
    position: absolute;
    top: -100px;
    z-index: 999999;
    left: 50%;
    transform: translateX(-50%);
}
.user-items-list-carousel__gutter {
    overflow: visible;
}
li.user-items-list-carousel__slide {
    padding-top: 120px !important;
}}
body {
    overflow-x: hidden;
}

Screen Shot 2024-04-21 at 11.27.43 am.png

Link to comment
On 4/21/2024 at 8:29 AM, daniellemusarra said:

Hello! I've just used this code on my site and it mostly works but the whole circle isn't showing (cut in half) in the testimonial section (middle of home page). I'm wondering if I could please get some help with this. TIA!

my site is: https://grouse-pepper-fl3e.squarespace.com/home
PW: 123

This is the code I currently have:

/* testimonial */
.user-items-list-item-container[data-section-id="6620f888fb5a3200413e988f"] {
.user-items-list-carousel__media-container {
    position: absolute;
    top: -100px;
    z-index: 999999;
    left: 50%;
    transform: translateX(-50%);
}
.user-items-list-carousel__gutter {
    overflow: visible;
}
li.user-items-list-carousel__slide {
    padding-top: 120px !important;
}}
body {
    overflow-x: hidden;
}

Screen Shot 2024-04-21 at 11.27.43 am.png

You can use this CSS code under above code

.user-items-list-carousel__slides-revealer {
    overflow: visible !important;
}
body, html {
    overflow-x: hidden;
}

 

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

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.