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

8 answers to this question

Recommended Posts

  • 1

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.


If anyone's response has helped you, click the like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png icon (bottom-right) to show them some appreciation. If their response didn't help, ask for more help, or wait for users to chime in. 
Need more help than I can provide via the forum? I'm a professional Developer who works with Designers internationally. You can book me via my company's website.

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

Share this post


Link to post
  • 0

If anyone's response has helped you, click the like-20-mag.png.3997345d620e40b4760b5d7a667cad54.png icon (bottom-right) to show them some appreciation. If their response didn't help, ask for more help, or wait for users to chime in. 
Need more help than I can provide via the forum? I'm a professional Developer who works with Designers internationally. You can book me via my company's website.

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

Create an account or sign in to comment

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


√ó
√ó
  • Create New...