Jump to content

Adjusting height of 3 columns to match

Recommended Posts

Site URL: https://fiddle-apricot-633p.squarespace.com/

Hi Circle Community!

Site Password: brianamathias

In the SERVICES section, I've created 3 columns and customized them using flexbox. Each column has an accordion block at the bottom, that when expanded, expands the column. I'd like all 3 columns to have the same height when nothing is expanded and only change that height when the respective accordion block is expanded. 

I used display: flex; and align-items: stretch; at first, which made all 3 columns have the same height but then when one of the accordion blocks was expanded, the other two columns expanded with it. I've attached screen shots to demonstrate. 

I'd like to target the height of the columns in another way to make them all the same height (and still responsive). On mobile this isn't an issue since the columns stack. 

Thank you!

Screen Shot 2022-02-21 at 11.05.22 AM.png

Screen Shot 2022-02-21 at 11.06.24 AM.png

Screen Shot 2022-02-21 at 11.08.04 AM.png

Screen Shot 2022-02-21 at 11.08.30 AM.png

Link to comment
  • Replies 1
  • Views 461
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Answered my own questions after some playing! If anyone else has this issue, here was my fix...

I kept the flex-start value for the align-items property when targeting the parent container (.sqs-col-12 .sqs-row) and then targeted the individual column (.sqs-col-4), then used the min-height property and set it to 50vh; that way they all have the same minimum height but still expand when the accordion is expanded. 

Screen Shot 2022-02-21 at 11.19.57 AM.png

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.