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

How to keep stack blocks all the same size?

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

Share this post


Link to post

16 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: 

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.


sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include. 
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form Extension, Datepicker Extension and Age Verification Extension. Need a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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

You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

sf-digital-signature-logo-email145.png.46606a2288a2847f44d81b9b7b58f3a5.png
Hi, I'm Paul, founder of SF Digital, a specialist company building the features that Squarespace didn't include. 
I am a Squarespace Expert and Squarespace Circle Leader with a
strong reputation on the Squarespace Forum. I'm trusted by thousands of Squarespace users worldwide, including designers, freelancers, business owners and agencies. My extensions add capabilities to Squarespace websites around the globe. They include the Enquiry Form Extension, Datepicker Extension and Age Verification Extension. Need a custom Squarespace extension? Tell me about the functionality you need. Note that some links in my posts may be affiliate links. Book a Squarespace Expert when you need help.

Share this post


Link to post
  • 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

Share this post


Link to post
  • 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!

Share this post


Link to post
  • 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

Share this post


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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 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?


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 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.! 

Share this post


Link to post

Create an account or sign in to comment

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


√ó
√ó
  • Create New...