Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to keep stack blocks all the same size?


romerodan

Question

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

21 answers to this question

Recommended Posts

  • 3

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

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

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!

 

Screenshot 2019-10-29 14.33.21.png

Link to comment
  • 0

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

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
  • 0

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi! I'm Paul, an independent Squarespace Consultant since 2007 and founder of SF Digital,¬†building¬†the features that Squarespace didn't include‚ĄĘ. Our mini-extensions allow you to¬†pick dates in any format, show¬†prices in other currencies, take orders without payment or improve your cart.¬†I value¬†honesty, integrity, transparency and respect ‚ô•.¬†Links in my posts may refer to SF Digital products or may be affiliate links.

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

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

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
  • 0

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

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

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

Create an account or sign in to comment

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

√ó
√ó
  • Create New...