Jump to content

Need help changing the background card size in a simple list

Recommended Posts

Hi, I am trying to make the card background smaller for a simple list auto layout. I have the padding set to zero, but I want it to be smaller.

Here is what I am looking for:

1) Top - The grey card should be lowered about 1/4 so the image looks like it overlaps it

2) Bottom - The grey card should be higher so half the button is in the card and the other half is overlapping.

The site is live so no need for a password - https://www.uplifttherapyformen.com/our-team

Thank you for your help.

Screenshot 2023-03-08 at 4.42.32 PM.png

Link to comment
1 hour ago, michael2019 said:

Hi, I am trying to make the card background smaller for a simple list auto layout. I have the padding set to zero, but I want it to be smaller.

Here is what I am looking for:

1) Top - The grey card should be lowered about 1/4 so the image looks like it overlaps it

2) Bottom - The grey card should be higher so half the button is in the card and the other half is overlapping.

The site is live so no need for a password - https://www.uplifttherapyformen.com/our-team

Thank you for your help.

Screenshot 2023-03-08 at 4.42.32 PM.png

On Section Edit, have tried changing style yet?

image.png.2de43a82aa168e8a9dbe0bf93831f940.png

 

image.png.c121231b346c811e6c7c6980b941f1a5.png

Support me by pressing 👍 or marking as solution if this is useful for you

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Do you mean some thing like that?

image.thumb.png.d425f9d09f90197d9197814098c5f591.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 3/9/2023 at 9:01 PM, michael2019 said:

Exactly.

Try adding to Design > Custom CSS

/* List overlap style */
.user-items-list-item-container[data-section-id="6408e883c72daf5648086ec7"] {
.list-item-media {
    position: relative;
    top: -50px;
}
.list-item-content__button-wrapper {
    position: relative;
    bottom: -25px;
}}

 

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.