DavidBakes Posted November 1, 2022 Share Posted November 1, 2022 (edited) Hello! On the homepage, I would like to vertically center this text block to the image block on PC: But I would like the text to be underneath the image on tablet and mobile. I tried reading through a couple forum posts to do it using CSS but wasn't able to get it to work, would someone be able to help? Website: https://www.pxresources.com.au/ Thank you! Edited November 1, 2022 by DavidBakes Needed to add website URL Link to comment
Ziggy Posted November 1, 2022 Share Posted November 1, 2022 Hi @DavidBakes, have you tried setting the image block design to "card"? Depending on how you have that block styled, you can certainly use that to align the text and image better (though with the quantity of text it will still extend below when it gets too tall for the image). You can adjust when this block stacks the image and text with some CSS like this: https://schwartz-edmisten.com/blog/force-an-image-card-to-stack-on-tablet-in-squarespace @media screen and (max-width: 800px) { .sqs-block-image .design-layout-card:not(.sqs-narrow-width) { display: block!important; } .sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper { width: 100%; margin-left: 0!important; } .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child { width: 100%; } } Hope that helps! Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? Link to comment
DavidBakes Posted November 1, 2022 Author Share Posted November 1, 2022 13 hours ago, Ziggy said: Hi @DavidBakes, have you tried setting the image block design to "card"? Depending on how you have that block styled, you can certainly use that to align the text and image better (though with the quantity of text it will still extend below when it gets too tall for the image). You can adjust when this block stacks the image and text with some CSS like this: https://schwartz-edmisten.com/blog/force-an-image-card-to-stack-on-tablet-in-squarespace @media screen and (max-width: 800px) { .sqs-block-image .design-layout-card:not(.sqs-narrow-width) { display: block!important; } .sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper { width: 100%; margin-left: 0!important; } .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child { width: 100%; } } Hope that helps! Hi Ziggy, thank you for your response and advice. This is something I've considered but unfortunately the text formatting in the image card is not flexible enough to do what I would like to with the text next to it. Link to comment
DavidBakes Posted November 2, 2022 Author Share Posted November 2, 2022 15 hours ago, Ziggy said: Hi @DavidBakes, have you tried setting the image block design to "card"? Depending on how you have that block styled, you can certainly use that to align the text and image better (though with the quantity of text it will still extend below when it gets too tall for the image). You can adjust when this block stacks the image and text with some CSS like this: https://schwartz-edmisten.com/blog/force-an-image-card-to-stack-on-tablet-in-squarespace @media screen and (max-width: 800px) { .sqs-block-image .design-layout-card:not(.sqs-narrow-width) { display: block!important; } .sqs-block-image .design-layout-card:not(.sqs-narrow-width) .image-card-wrapper { width: 100%; margin-left: 0!important; } .sqs-block-image .design-layout-card:not(.sqs-narrow-width)>div:first-child { width: 100%; } } Hope that helps! Hi Ziggy, thank you for your response and advice. This is something I've considered but unfortunately the text formatting in the image card is not flexible enough to do what I would like to with the text next to it. Update-- Ended up switching to using an image card after all. Thank you! Link to comment
Ziggy Posted November 2, 2022 Share Posted November 2, 2022 Glad that advice helped! Can you mark my post as the solution? Please like and upvote if my comments were helpful to you. Cheers! Zygmunt Spray Squarespace Website Designer Contact me: https://squarefortytwo.com 🔌 Ghost Squarespace Plugins (Referral link)📈 SEO Space (Referral link)⬛ SquareWebsites Plugins (Referral link)☕ Did I help? Buy me a coffee? 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