Jump to content

How to keep stack blocks all the same size?

Go to solution Solved by paul2009,

Recommended Posts

Hey again!

 

I'm seeming to have an issue with keeping my image stack blocks the same size. I've adding paragraph lines to make each stack block the same size, but when I save the changes, SP seems to void the paragraphs and shrinks the boxes ūüė©.

 

I've got this structure from this lady on YT who added paragraph lines to her stack block, clicked saved, and then the stack blocks STAYED the same size. Mine shrink..

 

Is there something I'm missing or did squarespace do this intentionally with an update and is there any way to indeed keep my stack blocks the same size?

 

My site: www.drpodcasts.com

 

Thank you for your help!

Screen Shot 2019-10-28 at 9.37.24 PM.png

Screen Shot 2019-10-28 at 9.37.13 PM.png

Link to comment

@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?

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • Solution

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: 

shrinking-blocks.thumb.gif.5a0bfb4489a41399de554905e6e1072d.gif

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:

shrinking-blocks-aligned.thumb.gif.afb6316817c4f3a090bfd112bc25cd96.gif

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

Edited by paul2009
GIF Screenshots were not working

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ‚ô•.
Work: Squarespace Developer and¬†founder of¬†SF Digital, building the features¬†Squarespace didn't include‚ĄĘ.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

Link to comment

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ‚ô•.
Work: Squarespace Developer and¬†founder of¬†SF Digital, building the features¬†Squarespace didn't include‚ĄĘ.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
Catch up on all the release notes and announcements 2023 [for Circle members only] (there's a public version here)

Buy me a coffee

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

Edited by erin3
Link to comment
  • 2 weeks later...
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: 

spacer.png

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:

spacer.png

@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!

Link to comment
  • 2 months later...
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! 

Lifestyle and wedding photographer, based in Amsterdam (The Netherlands) but available for nice projects worldwide. My photography style is fine art, in combination with journalism photography. To see more work, visit my website www.evelienhogers.com

Link to comment
  • 2 months later...
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 weeks later...

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

Link to comment
  • 2 months later...
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.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 1 month later...
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...

Create an account or sign in to comment

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

√ó
√ó
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.