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 comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

image.thumb.png.ad7289281b269c41b997c5a87b40a1d9.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
On 4/25/2021 at 9:57 PM, 19blue said:

The problem occurs when scaling the browser. (images below) 1238846291_ScreenShot2021-04-25at4_55_37PM.thumb.png.5ac503fab7859503cbebbe321006a282.png812047200_ScreenShot2021-04-25at4_55_30PM.thumb.png.a7a9f9b2eec58def577261ad34754d64.png1685046897_ScreenShot2021-04-25at4_55_51PM.thumb.png.85057b62398c063dcb80efb170593c7a.png

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

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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

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

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0
14 hours ago, Nana-nana said:

Try adding to Design > Custom CSS

/* equal height of text boxes */
@media screen and (min-width:992px) {
div#block-583a655a5af58a252d03+.row .html-block {
    min-height: 150px;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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