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!

On 11/5/2019 at 4:44 AM, erin3 said:

Sorry about that! 

password: Fem2019

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

I love your website! 

Sorry this is an old post but I can't seem to figure this out? I've tried several solutions from trawling here and google but can't find one that works.

Website is https://sparrow-minnow-h64a.squarespace.com/ the specific page is /pricing and the password is: mirlo.

@tuanphan would you be able to help?

Thanks!

4 hours ago, ADC1570048538 said:

Sorry this is an old post but I can't seem to figure this out? I've tried several solutions from trawling here and google but can't find one that works.

Website is https://sparrow-minnow-h64a.squarespace.com/ the specific page is /pricing and the password is: mirlo.

@tuanphan would you be able to help?

 

Thanks!

incorrect password mirlo.

@tuanphan sorry I meant mirlo without the full stop 

@paul2009 @tuanphan Hey guys! I'm having a similar issue... I have a text grid set up on a regular page... not an index page. When you view it on other screen sizes, it becomes a jumbled mess. How can I apply flexbox or a set height to something like this? Thanks in advance!

https://visityadkin.squarespace.com/dining

On 5/22/2020 at 10:24 PM, stephanieberbec said:

@paul2009 @tuanphan Hey guys! I'm having a similar issue... I have a text grid set up on a regular page... not an index page. When you view it on other screen sizes, it becomes a jumbled mess. How can I apply flexbox or a set height to something like this? Thanks in advance!

https://visityadkin.squarespace.com/dining

 

It seems you solved with stack box?

kinda having the same problem with stack blocks.. Images that I add are making the stacks larger than others and resizing isn't working was hoping to limit the size of the stack block all the same size.   url: https://imscommand.com/team-1

hopefully you can help T.I.A.! 

@paul2009  - how can I apply the flex to card blocks in 7.1? 

https://pollyannawilkinson.squarespace.com/

23 minutes ago, Hannahmay said:

@paul2009  - how can I apply the flex to card blocks in 7.1? 

 

https://pollyannawilkinson.squarespace.com/

 

 

Can you share link to page where you use Card blocks? We can check easier.

I am using 7.1 and would like to equalise the height of the My Services text on this homepage www.softskillsuccess.ie. @tuanphan any help would be much appreciated. I have not used much css for 7.1 yet

On 10/8/2020 at 3:27 PM, fetchati said:

I am using 7.1 and would like to equalise the height of the My Services text on this homepage www.softskillsuccess.ie. @tuanphan any help would be much appreciated. I have not used much css for 7.1 yet

Add to Home > Design > Custom CSS

@media screen and (min-width:992px) {
div#block-18e3b6eefa26334357bc+.row h3 {
    min-height: 95px;
}
div#block-18e3b6eefa26334357bc+.row p {
    min-height: 200px;
}
}
@media screen and (min-width:768px) and (max-width:991px) {
div#block-18e3b6eefa26334357bc+.row h3 {
    min-height: 100px;
}
div#block-18e3b6eefa26334357bc+.row p {
    min-height: 380px;
}
}

I'm looking to add flex to an image stack layout and make the text boxes below all the same size.

URL: nishaland.squarespace.com

Password: Abundance1

Page: Work with Me