Jump to content

Equal Column Heights for Lists so Cards and Buttons Align

Go to solution Solved by paul2009,

Recommended Posts

Site URL: https://marineselenee.squarespace.com/

Hi!!

I've been playing with the List layouts, but struggling to figure out the code to get the buttons to align and/or the card background to be equal. 

The three areas that are frustrating me are the home page - the first list of three "Sessions" "Course" "Book", all the buttons need to align - and currently they only align at certain browser widths. I've tried some coding I've used in the past, but I can't seem to capture the right element.

https://marineselenee.squarespace.com/

And then this page has two issues - the first list of three "Identify" "Explore" Develop" the card height needs to align across all three for all browser widths so the images beneath the copy aligns, and then the block of 8 cards - I've tried to align them manually, but I just need all cards to be equal height. 

https://marineselenee.squarespace.com/course

Any solutions? Thanks in advance!

Example 3 - Home page.jpg

 

 

Example 1 - Course page.jpg

Example 2 - Course page.jpg

Edited by StoriesAroundTheSun
Question answered, so removing password
Link to comment
  • Solution
29 minutes ago, StoriesAroundTheSun said:

I've been playing with the List layouts, but struggling to figure out the code to get the buttons to align and/or the card background to be equal. 

Have you looked at the list layout settings, in Edit Content > Design > Size & Space?

Scroll to the bottom and there is an option to make each item the same height under Position:

image.png.c1ba256be0295e7ee08d48a4f0722215.png

Has this post helped you? Let me know by clicking an icon below  ⬇️

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment
13 hours ago, paul2009 said:

Have you looked at the list layout settings, in Edit Content > Design > Size & Space?

Scroll to the bottom and there is an option to make each item the same height under Position:

image.png.c1ba256be0295e7ee08d48a4f0722215.png

Has this post helped you? Let me know by clicking an icon below  ⬇️

@paul2009 oh my goodness!!!!! You're the best! Can't believe I missed that icon ☀️ Appreciate you responding ... works like a dream ... so happy 🎉🙏🌟☀️

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.