Jump to content

Equal vertical alignment of text/buttons within columns

Go to solution Solved by tuanphan,

Recommended Posts

Hi there, I have a simple 4 column layout in one of my page sections where there are images, text, and buttons. Right now, the first column has less heading text than the other three, which is making the button below it higher in just that one column. I know I could change just the bottom margin in that block as a temporary fix, but all the content may change from time to time. Is there a way to get the buttons to stay in the same alignment no matter how much text there is above them?

I know Flexbox automatically makes equal height columns, and I actually have the section flexing on tablet view so this problem isn't happening there, but for when I try to apply display:flex to the full screen view, it's not affecting how the columns look.

URL:  https://www.youbelongsd.com/welcome-ybh#home-learn-more

Thanks!

Hey, I'm Jin (he/him). I'm a front end dev learning to make custom sites in Squarespace.

If you find my suggestions helpful, please upvote & like!😺

 

Link to comment
  • Solution

Add to Design > Custom CSS

@media screen and (min-width:901px) {
div#block-63769308103f8746b306de17+.row .span-3 {
    position: relative;
    flex: 1;
    padding-bottom: 100px;
}
div#block-63769308103f8746b306de17+.row {
    display: flex;
}
div#block-63769308103f8746b306de17+.row .button-block {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 9999;
}
}

image.thumb.png.2f46202136045fc5de12063c25ddba5b.png

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
On 12/11/2022 at 1:16 AM, tuanphan said:

Add to Design > Custom CSS

@media screen and (min-width:901px) {
div#block-63769308103f8746b306de17+.row .span-3 {
    position: relative;
    flex: 1;
    padding-bottom: 100px;
}
div#block-63769308103f8746b306de17+.row {
    display: flex;
}
div#block-63769308103f8746b306de17+.row .button-block {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 9999;
}
}

image.thumb.png.2f46202136045fc5de12063c25ddba5b.png

Thank you, this worked perfectly. You are a CSS wizard!

P.S. I am not familiar with ways you are using selectors in Squarespace. If you place "div" in front of a block id, you can use "+" to add classes of blocks beneath that first element? How does this work?

This has been one of my biggest headaches in Squarespace, because if I were coding from scratch, I would of course have this entire section in a div, but in Squarespace it is all separate blocks. Your method may save me from having to create custom code blocks all the time!

Edited by jinlikegold

Hey, I'm Jin (he/him). I'm a front end dev learning to make custom sites in Squarespace.

If you find my suggestions helpful, please upvote & like!😺

 

Link to comment
On 12/13/2022 at 4:09 AM, jinlikegold said:

Thank you, this worked perfectly. You are a CSS wizard!

P.S. I am not familiar with ways you are using selectors in Squarespace. If you place "div" in front of a block id, you can use "+" to add classes of blocks beneath that first element? How does this work?

This has been one of my biggest headaches in Squarespace, because if I were coding from scratch, I would of course have this entire section in a div, but in Squarespace it is all separate blocks. Your method may save me from having to create custom code blocks all the time!

Because the row has no id or class name, so I target block above the row

Reference: https://www.w3schools.com/cssref/css_selectors.php

I used this selector: https://www.w3schools.com/cssref/sel_element_pluss.php

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

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.