Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

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


roem

Question

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 post
  • Answers 17
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Add to Home > Design > Custom CSS div#page-5ff0e8f3e293bc1fe25a4a80 .span-4 { background: #f1a2a1; margin: 20px; } @media screen and (min-width:641px) { div#page-5ff0e8f3e293bc1fe25a

Hi. Sorry for the delay. Do you still need help? We can use CSS Flex to solve this

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;

Posted Images

17 answers to this question

Recommended Posts

  • 0

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

Link to post
  • 0

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 post
  • 0
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?

Link to post
  • 0
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

Link to post
  • 0

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 post
  • 0
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

Link to post
  • 0
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?

Link to post
  • 0
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?

Link to post
  • 0
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.

Link to post
  • 0
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;
}
}

 

Link to post
  • 0
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

Link to post
  • 0
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 post
  • 0
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?

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...