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

14 hours ago, Nana-nana said:

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

Pass: Soon2be

Can you try again?

 

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

Hi @tuanphan!!

I am also dealing with the same problem with my images blocks  and would really appreciate your help!!!

Thanks in advance for your help!!

www.salonjohann.fr

On 8/31/2021 at 12:28 AM, tuanphan 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;
}
}

 

Thank you so so much!! You're a squarespace forum hero!!lol

On 9/8/2021 at 8:36 PM, SalonJohann said:

Hi @tuanphan!!

I am also dealing with the same problem with my images blocks  and would really appreciate your help!!!

Thanks in advance for your help!!

www.salonjohann.fr

On 10/8/2021 at 11:07 PM, SalonJohann said:

 

Hi,

You mean these images under NOS ENGAGEMENTS?

I mean the two blocks here in copy. Thanks  @tuanphan

On 10/11/2021 at 1:47 PM, SalonJohann said:

I mean the two blocks here in copy. Thanks  @tuanphan

Try adding to Design > Custom CSS

@media screen and (min-width:901px) {
div#page-5dfb862a6bc56420bffd3cc3>.row:nth-child(2) .image-subtitle {
    min-height: 230px;
}
}

On 9/8/2021 at 8:36 PM, SalonJohann said:

Hi @tuanphan!!

I am also dealing with the same problem with my images blocks  and would really appreciate your help!!!

Thanks in advance for your help!!

www.salonjohann.fr

Thanks the code worked for the first one.🙏

On 10/13/2021 at 2:39 PM, SalonJohann said:

Thanks the code worked for the first one.🙏

Use this new code

@media screen and (min-width:901px) {
div#page-5dfb862a6bc56420bffd3cc3>.row:nth-child(2) .image-subtitle {
    min-height: 230px;
}
/* nos engagements */
div#block-yui_3_17_2_1_1612518002444_61807+.row .image-subtitle {
    min-height: 300px;
}
}

@tuanphanMerci you are the best. Problem solved.

Hi @tuanphan

I'm having the same issue, and the first .row.html-block code isn't working for me.

https://www.curiate.it/inspire-it-1

Can you please take a look for me?
 

Thanks in advance 😄

On 9/29/2023 at 11:56 PM, stacytangdesign said:

Hi @tuanphan

I'm having the same issue, and the first .row.html-block code isn't working for me.

https://www.curiate.it/inspire-it-1

Can you please take a look for me?
 

Thanks in advance 😄

Here I set same fixed height for all boxes

Add this code to Website Tools (under Not Linked) > Custom CSS

/* Inspire IT 1 */
@media screen and (min-width:992px) {
.package {
    min-height: 650px !important;
}
}
/* tablet */
@media screen and (max-width:991px) and (min-width:768px) {
.package {
    min-height: 1300px !important;
}
}

Having issues really frustrated with this portion of CSS 

 austinbarbell.com/join

On 1/18/2024 at 11:45 PM, RATX said:

Having issues really frustrated with this portion of CSS 

 austinbarbell.com/join

 

It looks like you figured it out?

it seems though there is overlap when its closer to a tablets aspect ratio