Jump to content

Vertically center text block to image block

Recommended Posts

Hello! On the homepage, I would like to vertically center this text block to the image block on PC:

image.thumb.png.f8890882b61dcd38d303150299ef4c6b.png

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 by DavidBakes
Needed to add website URL
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

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 useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment
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
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

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.