Jump to content

Four columns with vertically aligned buttons

Recommended Posts

Site URL: https://vibraphone-teal-ly35.squarespace.com/

I've used this code before, but I'm getting no joy on getting my buttons to align to the bottom of the columns.  The columns themselves have an even height – just the buttons are thwarting me.

I've got a background color in the css, just to see that I'm affecting the button container at all, since I used to use ".button-block" but that seems now to do nothing.  Every part of this works, but I just can't get the danged buttons to sink in the columns, for love nor money.  I've tried:

{margin-top: auto;}
{margin-bottom: auto;}
{height: 21rem;}
{align-content: flex-end;}
{justify-content: flex-end;}

 

I've also tried using the individual button block IDs, rather than the class, and get similar results.

My CSS:

/*Making Activities Columns the same Height*/

[data-section-id="62a232712ab1e65e2e683882"] .sqs-row {
display: flex;
flex-wrap: wrap;
}

[data-section-id="62a232712ab1e65e2e683882"] .sqs-col-3{
background-color: #ebebeb;
box-sizing: border-box;
flex: 1 1 246px;
flex-direction: column;
margin: 1%;
padding: 10px;
}


[data-section-id="62a232712ab1e65e2e683882"] .sqs-block-button{
  background-color: #000000;
  margin-top: auto;
}

 

-------------------------

Thank you in advance for your help!

Link to comment
  • Replies 6
  • Views 271
  • Created
  • Last Reply

Top Posters In This Topic

  • 3 weeks later...
18 hours ago, kaitlin_b said:

Yes - circled below.  This seems like something that should be simple, but I just can't get it to work.

Thank you in advance for taking a look.

The site password has been updated to:

Poppy2022

 

KennacoilButtonAlignmnet.thumb.PNG.808e4c4f9f65d97d7193350523ea64db.PNG

Which page are you referring to? I don't see it on homepage

https://vibraphone-teal-ly35.squarespace.com/?noredirect

Also, if you use List Section, try this option first

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

Derp - didn't realize it didn't change the slug in dev: it's on the Activities page.

List did it!  Thank you - wish I'd stumbled upon that in some of my searches.

Thank you so much for your help and patience.  I appreciate your help on this forum - I read a lot of your tips and they're always great.

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.