Jump to content

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

Recommended Posts

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
 

image.thumb.jpg.eada1c485c4de8db6ed0b330330981e3.jpg

 

Edited by roem
Link to comment

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;
}
}

image.thumb.png.9382bad8292ebf0e6936603239a1cbc8.png

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

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!

image.thumb.jpg.cf73976faee491957f9ae0d683b68310.jpg

Link to comment
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!

image.thumb.jpg.cf73976faee491957f9ae0d683b68310.jpg

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

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
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;
}
}

image.thumb.png.23a96a4b68facc41e52d1fabc4c6b089.png

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
  • 1 month later...
  • 2 weeks later...

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!

Link to comment
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

Screen Shot 2021-02-22 at 2.22.55 AM.png

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

We can use CSS Flex to solve this

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
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?

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
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?

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
  • 2 weeks later...
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;
}
}

 

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
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. 

Screen Shot 2021-03-28 at 10.30.37 PM.png

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;
}
}

image.thumb.png.f18598aec6fc616286a05fec34b19c13.png

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
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;
}
}

image.thumb.png.f18598aec6fc616286a05fec34b19c13.png

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

Link to comment
  • 3 weeks later...
  • 3 months later...
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

Screen Shot 2021-08-27 at 10.10.12 AM.png

Your site is private. Can you check it again?

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.