How do I make a row of text blocks maintain equal height (and responsive)?

Site URL: https://cobalt-endive-6g42.squarespace.com/

Hi all, 

I'm trying to figure out how to make three text blocks--arranged side by side--maintain equal height as you resize the browser. I haven't been able to find many posts that address this issue, though I keep seeing "display: flex" brought up as a potential solution. I've been playing around with it for a few days and haven't come up with anything.

As you can see in my screen shot, I just want the red part of the other two text blocks to always match the height of the the third one. Simply adding in something like "height: 200px" doesn't work because it's not responsive.

Any help would be appreciated!

Site Password: 123
 

Add to Home > Design > Custom CSS

div#page-5ff0e8f3e293bc1fe25a4a80 .span-4 {
    background: #f1a2a1;
    margin: 20px;
}
@media screen and (min-width:641px) {
div#page-5ff0e8f3e293bc1fe25a4a80>.row {
    display: flex;
    flex-wrap: nowrap;
}
}

Hi @tuanphan,

Thanks for your response, your fix works, but only with a single row.

I've created a new page on the test website that shows exactly what I will try to do on my real website. I tried to use your fix from your response on the new website page, but it doesn't seem to work.

As you can see in the below image, the text boxes aren't the same height. By the way, these text blocks are part of the image columns, and I just set "margin-top: -35px" to eliminate the gap between the text and image blocks.

How do I make the text blocks maintain equal height on this page?

Thanks again!

On 1/8/2021 at 3:37 AM, roem said:

Hi @tuanphan,

Thanks for your response, your fix works, but only with a single row.

I've created a new page on the test website that shows exactly what I will try to do on my real website. I tried to use your fix from your response on the new website page, but it doesn't seem to work.

As you can see in the below image, the text boxes aren't the same height. By the way, these text blocks are part of the image columns, and I just set "margin-top: -35px" to eliminate the gap between the text and image blocks.

How do I make the text blocks maintain equal height on this page?

Thanks again!

Each case needs different code. Can you share link to this page?

14 hours ago, tuanphan said:

Each case needs different code. Can you share link to this page?

Hi @tuanphan,

Here's the link to the page: https://cobalt-endive-6g42.squarespace.com/

Password: 123

On 1/11/2021 at 4:01 AM, roem said:

Hi @tuanphan,

Here's the link to the page: https://cobalt-endive-6g42.squarespace.com/

Password: 123

Use this code

div#page-5ff768969e1c525bf023d676 .span-12 .span-4 {
    background: #b4b5b9;
    margin: 20px;
}
div#page-5ff768969e1c525bf023d676 .image-block {
    padding-left: 0;
    padding-right: 0;
}
@media screen and (min-width:641px) {
div#page-5ff768969e1c525bf023d676 .span-12>.row {
    display: flex;
    flex-wrap: nowrap;
}
}

Hi @tuanphan

Is there any way to ensure equal height on these markdown boxes on this page and have the buttons and various copy sections line up as well?
 

https://www.sentrumosteopati.no/priser-1

Hi @tuanphan

I need to do the same thing (keep text boxes the same height, so they line up on any size screen). I've tried to use your code above, but it hasn't worked for me. I know to do inspect element and have managed to follow CSS codes for other things, but I can't see the equivalent elements from your code. I tried a few things but no luck. Would you be able to help? CSS code that anyone could follow for their sites would hopefully others too :)

https://www.roguebee.co.uk/

Thank you!

On 2/22/2021 at 8:37 AM, 19blue said:

Hi @tuanphan

Is there any way to ensure equal height on these markdown boxes on this page and have the buttons and various copy sections line up as well?
 

https://www.sentrumosteopati.no/priser-1

Hi. Sorry for the delay. Do you still need help?

We can use CSS Flex to solve this

On 3/3/2021 at 10:45 PM, VickyW said:

Hi @tuanphan

I need to do the same thing (keep text boxes the same height, so they line up on any size screen). I've tried to use your code above, but it hasn't worked for me. I know to do inspect element and have managed to follow CSS codes for other things, but I can't see the equivalent elements from your code. I tried a few things but no luck. Would you be able to help? CSS code that anyone could follow for their sites would hopefully others too :)

https://www.roguebee.co.uk/

Thank you!

Hi. Which section do you want to do this?

On 3/5/2021 at 5:24 AM, roem said:

@VickyW

I'm running into the same issue as you. The code provided by @tuanphan works on my test website, but I can't find the equivalent elements on my real website. Really just makes me want to use Webflow lol

Can you share link to real site?

On 3/7/2021 at 7:31 AM, tuanphan said:

Hi. Sorry for the delay. Do you still need help?

We can use CSS Flex to solve this

Hi @tuanphan , no worries any help is much appreciated.
Still haven't found a solution.

On 3/13/2021 at 6:23 AM, 19blue said:

Hi @tuanphan , no worries any help is much appreciated.
Still haven't found a solution.

aaaaaaaaaa I'm overloaded. Sorry!

Add this to Design > Custom CSS

/* Equal boxes */
@media screen and (min-width:768px) {
div#block-32cc516860957b8ac645+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
div#block-32cc516860957b8ac645+.row .span-3 {
    flex: 1;
    background: #fff;
    border: #ff6900 2px solid;
    border-radius: 10px;
    padding: 5px !important;
    margin: 20px;
    text-align: center;
}
div#block-32cc516860957b8ac645+.row .span-3 .markdown-block {
    max-width: unset !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
}

@tuanphan

Thank you again! The code almost worked.
It's giving me two extremely long boxes and two short stacked ones instead of 4 equal ones. 

On 3/29/2021 at 3:34 AM, 19blue said:

@tuanphan

Thank you again! The code almost worked.
It's giving me two extremely long boxes and two short stacked ones instead of 4 equal ones. 

Use new code

/* Equal boxes */
@media screen and (min-width:768px) {
div#block-32cc516860957b8ac645+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
div#block-32cc516860957b8ac645+.row .span-3 {
    flex: 1;
    background: #fff;
    border: #ff6900 2px solid;
    border-radius: 10px;
    padding: 5px !important;
    margin: 20px;
    text-align: center;
}
div#block-32cc516860957b8ac645+.row .span-3 .markdown-block {
    max-width: unset !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
div#block-32cc516860957b8ac645+.row .span-6>.row {
    display: flex;
}
}

On 3/31/2021 at 4:17 AM, tuanphan said:

Use new code

/* Equal boxes */
@media screen and (min-width:768px) {
div#block-32cc516860957b8ac645+.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
div#block-32cc516860957b8ac645+.row .span-3 {
    flex: 1;
    background: #fff;
    border: #ff6900 2px solid;
    border-radius: 10px;
    padding: 5px !important;
    margin: 20px;
    text-align: center;
}
div#block-32cc516860957b8ac645+.row .span-3 .markdown-block {
    max-width: unset !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
div#block-32cc516860957b8ac645+.row .span-6>.row {
    display: flex;
}
}

Thank you @tuanphan It's not working but thanks for helping.

On 4/2/2021 at 5:41 AM, 19blue said:

Thank you @tuanphan It's not working but thanks for helping.

Did you edit anything after posting the above comment?

@tuanphan No, not prior to testing the code.

On 4/22/2021 at 5:43 AM, 19blue said:

@tuanphan No, not prior to testing the code.

It looks fine here. Did you solve?

On 4/24/2021 at 11:04 AM, tuanphan said:

It looks fine here. Did you solve?

The problem occurs when scaling the browser. (images below) 

On 4/25/2021 at 9:57 PM, 19blue said:

The problem occurs when scaling the browser. (images below) 

Do you still need help? Can you add me as a contributor? I will test some new code

21 hours ago, tuanphan said:

Do you still need help? Can you add me as a contributor? I will test some new code

@tuanphan It's been solved through constructing the page differently. Again thanks to your help;

Thank you.

Hi everyone!!

I am dealing with the same problem and would really appreciate your help!!!

Thank you so so much!!

https://hyperboloid-walrus-lmfg.squarespace.com/config/

On 8/27/2021 at 9:17 PM, Nana-nana said:

Hi everyone!!

I am dealing with the same problem and would really appreciate your help!!!

Thank you so so much!!

https://hyperboloid-walrus-lmfg.squarespace.com/config/

pass: grp90501

Your site is private. Can you check it again?

4 hours ago, tuanphan said:

Your site is private. Can you check it again?

https://hyperboloid-walrus-lmfg.squarespace.com/config/settings/site-visibility

Pass: Soon2be

Can you try again?