How to keep stack blocks all the same size?

Unfortunately, setting a minimum height (as suggested above) doesn't scale. It will only work above at fixed resolutions. See what happens when the code is applied: 

A better alternative is to use flexbox to create equal-sized containers. Add 

display: flex

to the column container, and then for columns of equal height, add

flex:1

to the columns themselves. Be careful about the specificity so that you don't inadvertently affect other elements on the same page.

@romerodan to do this on your site, you'll want to put the three columns in their own section of your index page. This will enable you to target just these three columns. When flexbox is used on the page, the columns do this at different resolutions:

@erin3 For specific advice for your site, please provide the URL of the page.

I have the same question! I'd love to add a bit of code to keep these the same size. I even played around with turning the dynamic font sizing on and off to fixed sizes, and still no luck. Any help would be greatly appreciated!

@romerodan You can use custom css min-height

Add to Home > Design > Custom CSS

/* Height for desktop */
@media screen and (min-width:901px) {
div#block-yui_3_17_2_1_1572308798174_58865 .image-card.sqs-dynamic-text-container {
    min-height: 500px;
}
}
/* Height for Tablet */
@media screen and (min-width:641px) and (max-width:900px) {
div#block-yui_3_17_2_1_1572308798174_58865 .image-card.sqs-dynamic-text-container {
    min-height: 300px;
}
}

@erin3 Can you share url?

@paul2009 thanks. How did you create the gif image?

@tuanphan See https://recordit.co/

On 10/29/2019 at 6:52 PM, tuanphan said:

@romerodan You can use custom css min-height

Add to Home > Design > Custom CSS

/* Height for desktop */
@media screen and (min-width:901px) {
div#block-yui_3_17_2_1_1572308798174_58865 .image-card.sqs-dynamic-text-container {
    min-height: 500px;
}
}
/* Height for Tablet */
@media screen and (min-width:641px) and (max-width:900px) {
div#block-yui_3_17_2_1_1572308798174_58865 .image-card.sqs-dynamic-text-container {
    min-height: 300px;
}
}

@erin3 Can you share url?

Sure! @romerodan & @paul2009 -  https://femfusion-fitness.squarespace.com/

@erin3 Your site is private. Please setup password & share url

30 minutes ago, tuanphan said:

@erin3 Your site is private. Please setup password & share url

Sorry about that! 

password: Fem2019

URL: https://femfusion-fitness.squarespace.com/

On 10/29/2019 at 5:48 AM, paul2009 said:

Unfortunately, setting a minimum height (as suggested above) doesn't scale. It will only work above at fixed resolutions. See what happens when the code is applied: 

A better alternative is to use flexbox to create equal-sized containers. Add 

display: flex

to the column container, and then for columns of equal height, add

flex:1

to the columns themselves. Be careful about the specificity so that you don't inadvertently affect other elements on the same page.

@romerodan to do this on your site, you'll want to put the three columns in their own section of your index page. This will enable you to target just these three columns. When flexbox is used on the page, the columns do this at different resolutions:

@erin3 For specific advice for your site, please provide the URL of the page.

Omg thank you so much for this! Sorry for the late reply!