Fixed Buttons on 4-columns with boarder and dropshado

Site URL: https://providencepoweryoga.squarespace.com

I have created four columns, and each column contains an image, text block, and a button. Also, I had a border and drop shadow created for each column.

How do I make all the buttons show up at the bottom of the box?

https://providencepoweryoga.squarespace.com

Password - power

See screengrab.

Here is the code I injected into that page for the border/drop shadow/hover.

<style>

 .sqs-col-3 {border: 2px solid ##F7F5F4;width:22%!important; height:690px; margin-left:2%;box-shadow: 5px 5px 15px rgba(0,0,0,0.4)}

.sqs-col-3:hover .sqs-block-button-element {background-color: ##F7F5F4!important}

@media only screen and (max-width:768px){ .sqs-col-3 {margin-left:0%!important; margin-bottom: 5%} }

</style>

Thank you!

Scott

Hey @indy give this custom CSS a try

 

@media(min-width: 768px) {
#page-section-5ee26c737f2406082d597b29 .sqs-col-3 {
    display: flex !important;
    flex-direction: column;
    padding-bottom:20px
}

#page-section-5ee26c737f2406082d597b29 .sqs-col-3 .sqs-block.button-block.sqs-block-button {
    margin-top: auto !important;
}
}

Result:

@RyanDejaegher - PERFECT! Thank you very much!!!!

Best,

Scott

I made some changes to this client's home page and now the buttons are not aligned. The "buy now" buttons are from a script and the "learn more" is created with Squarespace's button. Attached are two versions from different screens. Any insights? Here is the injected code thanks to @RyanDejaegher help. 

I'm thinking last year the buttons were SS generated buttons and not from a script.  

Website - https://www.providencepoweryoga.com/

<style>
  .sqs-col-3 {border: 2px solid ##F7F5F4;width:22%!important; height:690px; margin-left:3%;box-shadow: 5px 5px 15px rgba(0,0,0,0.4)}
.sqs-col-3:hover .sqs-block-button-element {background-color: ##F7F5F4!important}
  @media only screen and (max-width:768px){ .sqs-col-3 {margin-left:0%!important; margin-bottom: 5%} }
@media(min-width: 768px) {
#page-section-5ee26c737f2406082d597b29 .sqs-col-3 {
    display: flex !important;
    flex-direction: column;
    padding-bottom:20px
}

#page-section-5ee26c737f2406082d597b29 .sqs-col-3 .sqs-block.button-block.sqs-block-button {
    margin-top: auto !important;
  }
}
</style>

18 hours ago, indy said:

I made some changes to this client's home page and now the buttons are not aligned. The "buy now" buttons are from a script and the "learn more" is created with Squarespace's button. Attached are two versions from different screens. Any insights? Here is the injected code thanks to @RyanDejaegher help. 

I'm thinking last year the buttons were SS generated buttons and not from a script.  

Website - https://www.providencepoweryoga.com/

 

<style>
  .sqs-col-3 {border: 2px solid ##F7F5F4;width:22%!important; height:690px; margin-left:3%;box-shadow: 5px 5px 15px rgba(0,0,0,0.4)}
.sqs-col-3:hover .sqs-block-button-element {background-color: ##F7F5F4!important}
  @media only screen and (max-width:768px){ .sqs-col-3 {margin-left:0%!important; margin-bottom: 5%} }
@media(min-width: 768px) {
#page-section-5ee26c737f2406082d597b29 .sqs-col-3 {
    display: flex !important;
    flex-direction: column;
    padding-bottom:20px
}

#page-section-5ee26c737f2406082d597b29 .sqs-col-3 .sqs-block.button-block.sqs-block-button {
    margin-top: auto !important;
  }
}
</style>

Find this code

#page-section-5ee26c737f2406082d597b29 .sqs-col-3 {
    display: flex !important;
    flex-direction: column;
    padding-bottom: 20px;
}

change it to

#page-section-5ee26c737f2406082d597b29 .sqs-col-3 {
    display: flex !important;
    flex-direction: column;
    padding-bottom: 20px;
    position: relative;
}

and add new code

@media screen and (min-width:768px) {
#page-section-5ee26c737f2406082d597b29 .sqs-col-3 .code-block {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
	z-index: 999999999999;
}
}

Hi @tuanphan - thank you. My apologies for my delayed response. For the most part your code really helps. Thank you very much! Every once in awhile (depending on screen size) it gets a little funky. Typically the "Learn More" button is a little higher. while the other buttons are in line (a .jpg file i embedded). I have attached two .png. The good one is a 16" Macbook screen and then I get the same results if I make the browser a bit smaller. The second one is a larger screen in a vertical format. Which I'm sure most people do not view the site. Client is happy. If you do see a tweak, I'm happy to add it and see what happens. thanks again!

On 8/11/2021 at 9:36 PM, indy said:

Hi @tuanphan - thank you. My apologies for my delayed response. For the most part your code really helps. Thank you very much! Every once in awhile (depending on screen size) it gets a little funky. Typically the "Learn More" button is a little higher. while the other buttons are in line (a .jpg file i embedded). I have attached two .png. The good one is a 16" Macbook screen and then I get the same results if I make the browser a bit smaller. The second one is a larger screen in a vertical format. Which I'm sure most people do not view the site. Client is happy. If you do see a tweak, I'm happy to add it and see what happens. thanks again!

Hi,

Sorry for the delay. Do you still need help on this?

Yes, I haven't resolved it yet. thanks!