Four responsive equal height/width columns with aligned buttons.

This code gives me three vertically/horizontally responsive columns with equal height and width with buttons aligned. Regardless of difference in length of copy. However, it does not work when attempting to have four columns across. Any ideas of how I can make it work for four columns?

Thanks in advance.

[your-data-section-id] .sqs-row {
  display: flex;
  flex-wrap: wrap;
}
[your-data-section-id] .sqs-col-4 {
  background-color: #ebebeb;
  box-sizing: border-box;
  display: flex;
  flex: 1 1 330px;
  flex-direction: column;
  margin: 1%;
  padding: 30px;
}
[your-data-section-id] .button-block {
  margin-top: auto;
}

3 columns it will be .sqs-col-4 

4 columns it will be .sqs-col-3 

2 columns it will be .sqs-col-6 

Thank you again @tuanphan
 

I tried the .sqs-col-3 but it moves the 4th column down.

22 hours ago, 19blue said:

Thank you again @tuanphan
 

I tried the .sqs-col-3 but it moves the 4th column down.

 

Add this code under

@media screen and (min-width:768px) {
[your-data-section-id] .sqs-row {
 flex-wrap: nowrap !important;
}
}

@tuanphan thank you! worked perfectly.

Hi @tuanphan - I've followed the code you provided here and it's 99% worked for me. So thank you for that. But for some reason on laptop only (it's fine on tablets) I get this happening (see attached - the button block below 'Junior' has 'detached' itself from the rest of the card).

And also on the row below, the same thing is happening.

It seems to be related to how many lines of text I put into the block. Is there a way of fixing it so it all stay aligned regardless how much text I use?

website: https://www.eshertennis.co.uk/tennismembershipnew (pw: james)

On 10/9/2021 at 4:33 PM, jbassett said:

Hi @tuanphan - I've followed the code you provided here and it's 99% worked for me. So thank you for that. But for some reason on laptop only (it's fine on tablets) I get this happening (see attached - the button block below 'Junior' has 'detached' itself from the rest of the card).

And also on the row below, the same thing is happening.

It seems to be related to how many lines of text I put into the block. Is there a way of fixing it so it all stay aligned regardless how much text I use?

website: https://www.eshertennis.co.uk/tennismembershipnew (pw: james)

Hi,

It looks fine to me?

Hi Tuanphan - thanks for your reply. I fixed this a different way in the end. But appreciate you coming back to me.