romerodan Posted October 29, 2019 Share Posted October 29, 2019 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! Link to comment
letusbejoyful Posted October 29, 2019 Share Posted October 29, 2019 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! Link to comment
tuanphan Posted October 29, 2019 Share Posted October 29, 2019 (edited) @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 October 29, 2019 by tuanphan Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Solution paul2009 Posted October 29, 2019 Solution Share Posted October 29, 2019 (edited) 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. Edited March 4, 2021 by paul2009 GIF Screenshots were not working ShortAngryViking, romerodan, brandon and 1 other 2 1 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
tuanphan Posted October 29, 2019 Share Posted October 29, 2019 @paul2009 thanks. How did you create the gif image? paul2009 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
paul2009 Posted October 29, 2019 Share Posted October 29, 2019 @tuanphan See https://recordit.co/ brandon and tuanphan 2 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional. Would you like your customers to be able to mark their favourite products in your Squarespace store? Link to comment
letusbejoyful Posted November 5, 2019 Share Posted November 5, 2019 (edited) 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 November 5, 2019 by erin3 Link to comment
tuanphan Posted November 5, 2019 Share Posted November 5, 2019 @erin3 Your site is private. Please setup password & share url Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
letusbejoyful Posted November 5, 2019 Share Posted November 5, 2019 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/ Link to comment
romerodan Posted November 15, 2019 Author Share Posted November 15, 2019 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! paul2009 and tuanphan 2 Link to comment
ehogers Posted January 26, 2020 Share Posted January 26, 2020 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! letusbejoyful 1 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
ADC1570048538 Posted April 8, 2020 Share Posted April 8, 2020 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! Link to comment
tuanphan Posted April 9, 2020 Share Posted April 9, 2020 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
ADC1570048538 Posted April 9, 2020 Share Posted April 9, 2020 (edited) @tuanphan sorry I meant mirlo without the full stop Edited April 9, 2020 by ADC1570048538 Link to comment
stephanieberbec Posted May 22, 2020 Share Posted May 22, 2020 @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 Link to comment
tuanphan Posted May 25, 2020 Share Posted May 25, 2020 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Baggins Posted June 3, 2020 Share Posted June 3, 2020 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
Hannahmay Posted September 1, 2020 Share Posted September 1, 2020 @paul2009 - how can I apply the flex to card blocks in 7.1? https://pollyannawilkinson.squarespace.com/ Link to comment
tuanphan Posted September 1, 2020 Share Posted September 1, 2020 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
LucyDesigns Posted October 8, 2020 Share Posted October 8, 2020 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 Lucy O'Reilly Designs For Growth Ltd www.designsforgrowth.ie Link to comment
tuanphan Posted October 10, 2020 Share Posted October 10, 2020 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 Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
arcoirisdesign Posted January 5, 2021 Share Posted January 5, 2021 (edited) 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 Edited January 5, 2021 by thecatalystudio Link to comment
Toccare Posted October 3, 2023 Share Posted October 3, 2023 I'm trying to make it to where my product blocks are automatically all the same size but I havent worked with CSS enough to know what to do. Can someone share a way to solve this? Thanks in advance! URL: toccaredayspa.squarespace.com Page: Homepage > Scroll down to "Trending at Toccare" Link to comment
tuanphan Posted October 7, 2023 Share Posted October 7, 2023 On 10/4/2023 at 2:33 AM, Toccare said: I'm trying to make it to where my product blocks are automatically all the same size but I havent worked with CSS enough to know what to do. Can someone share a way to solve this? Thanks in advance! URL: toccaredayspa.squarespace.com Page: Homepage > Scroll down to "Trending at Toccare" The site url doesn't exist. Can you check it again? Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment