Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 1

Vertically Centering Blocks of Two Columns


kaitschmidek

Question

Site URL: https://emilie-iggiotti.squarespace.com/the-truth-in-you

I saw this effect recently on a website (https://www.violahillstudio.com/) where the contents of two columns are vertically centered without using spacers. I've tried inspecting the code of the website and can't figure out how to achieve the same effect on a client's website. 

URL: https://emilie-iggiotti.squarespace.com/the-truth-in-you

Password: emilie

What I'm trying to do is in the index where the image block and text block appear beside each other, I would like to vertically center align the contents rather than have them align to the top of the index and have this effect maintain down to a screen size of 640px, after which the blocks stack on top of each other. I would ideally like to achieve this without the use of spacer blocks. 

I've attached an image that might help to explain this better.

Any guidance would be greatly appreciated!

vertically-align-blocks.jpg

Link to comment

22 answers to this question

Recommended Posts

  • 0

Add to Home > Design > Custom CSS

/* center text */
@media screen and (min-width:768px) {
div#page-5f384afee734c879bca3d892 .span-12>.row:nth-child(2) {
    display: flex;
    align-items: center;
}
}

image.thumb.png.6d132a3eef1f8802ab522d69fc47acf6.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

Dear @tuanphan,

I have the exact same issue, except my classes are all different and I need to do the same effect for 23 pages of staff members.
I would like the staff biography (the longer text) to be vertically centered next to the image.

598458898_Screenshot2020-09-13at17_25_13.png.4a876a95a445ac1590c2519b39d7a6df.png

Since I want to do this to many pages I gave the biography a class name by using this html code:

<div class=staffbio><h4>
Lajos became part of 
  ...
  ...
  expression.</h4></div>

Website: https://wisteria-panda-z2eg.squarespace.com/staff/wienkamp
pw: rotorrotor

How should I adjust you css in order to get the desired effect? 

All the best!

Gregor

Link to comment
  • 0
22 hours ago, Tonmeister said:

Dear @tuanphan,

I have the exact same issue, except my classes are all different and I need to do the same effect for 23 pages of staff members.
I would like the staff biography (the longer text) to be vertically centered next to the image.

Since I want to do this to many pages I gave the biography a class name by using this html code:


<div class=staffbio><h4>
Lajos became part of 
  ...
  ...
  expression.</h4></div>

Website: https://wisteria-panda-z2eg.squarespace.com/staff/wienkamp
pw: rotorrotor

How should I adjust you css in order to get the desired effect? 

All the best!

Gregor

Hi. I see you solved?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

 

2 minutes ago, Tonmeister said:

@tuanphan No, I just used a spacer. But this gives me uneven results depending on display.

I just removed the spacer, can you give it a go?

Thank You 🙏

Add to Home > Design > Custom CSS

/* Staff - Wienkamp page */
@media screen and (min-width:768px) {
div#block-b1204f7dea47721483c4>.row:nth-child(2) {
    display: flex;
    align-items: center;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 1/7/2021 at 5:43 AM, NivS said:

@tuanphan Hi I am looking to do the same on here:

https://tarantula-dachshund-y6ky.squarespace.com/ 

password: steph

Screen Shot 2021-01-06 at 4.42.03 PM.png

Add to Design > Custom CSS

/* We help you feel good */
@media screen and (min-width:768px) {
div#page-5fdd756a91828d0f5d309bf2>.row {
    display: flex;
    align-items: center;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 1/10/2021 at 6:09 PM, RobynHunt said:

@tuanphan Hiya 🙂 I'm looking to do the same. Trying to get the text to fall vertically centred to the image without using spacer blocks.

 

https://maroon-dodecahedron-4cnt.squarespace.com/
Password: R0byn11*

106561121_Screenshot2021-01-10at12_57_17.thumb.png.fb2a7473d8c69bd73baa6d74df05c01e.png

I don't see this section. Can you check url again?

image.thumb.png.4ffe91d8b99bbf55612af584c4915418.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 1/18/2021 at 5:23 PM, RobynHunt said:

Add this CSS

/* work with me - websites */
@media screen and (min-width:641px) {
div#block-yui_3_17_2_1_1582528870926_16860+.row {
    display: flex;
    align-items: center;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
On 4/24/2021 at 4:14 AM, Squid said:

@tuanphan I've been trying to use the logic from the codes above to do this on a site I'm working on, but cannot figure it out. Thanks in advance!

https://accordion-amphibian-3jtt.squarespace.com

Password: ss21

Add to Design > Custom CSS

/* align text image */
@media screen and (min-width:768px) {
/* innovative */
div#page-section-60832dc6bcb1090708e9c3d8>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
/* teamwork */
div#page-section-60832dabbcb1090708e9c0cb>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
/* we are solutions */
div#page-section-60832d878a8cae2d026ad750>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0
Posted (edited)

@tuanphan I'm trying to do this as well. Tried the codes above, replacing with my section/row IDs, and I couldn't get it to work.

Page link here - https://privnote.com/jnR5Ezi5#tUQkwicig

Thanks for your help 🙏

 

*edit - to clarify it's in the "What You'll Get..." section w the black background. I want to vertically center the text and images in both those rows

Edited by markmark1
added info
Link to comment
  • 0
11 hours ago, markmark1 said:

@tuanphan I'm trying to do this as well. Tried the codes above, replacing with my section/row IDs, and I couldn't get it to work.

Page link here - https://privnote.com/jnR5Ezi5#tUQkwicig

Thanks for your help 🙏

 

*edit - to clarify it's in the "What You'll Get..." section w the black background. I want to vertically center the text and images in both those rows

Can you check site url?

image.thumb.png.6509581d84c09aa595c5be588293d253.png

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 0

@tuanphan

Thanks for all of your great answers and help you provide for people like me!

Would there be any downside to adding CSS that vertically centers all objects (pics, text, buttons, etc) in a row? How would this be done?

Why doesn't squarespace give us the ability to do this from a design setting?

Edited by chadwritesallnight
Link to comment
  • 0
On 6/30/2021 at 6:07 AM, chadwritesallnight said:

@tuanphan

Thanks for all of your great answers and help you provide for people like me!

Would there be any downside to adding CSS that vertically centers all objects (pics, text, buttons, etc) in a row? How would this be done?

Why doesn't squarespace give us the ability to do this from a design setting?

Can you share link to page where you have problem?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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...