Vertically center text block to image block

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!

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!

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.

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!

Glad that advice helped! Can you mark my post as the solution?