Jump to content

Fixed Buttons on 4-columns with boarder and dropshado

Recommended Posts

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

Providence_Power_Yoga-3.png

Link to comment

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:
image.thumb.png.3208c29a1069dac7779b9110562d4ef9.png

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan

 

Link to comment
  • 11 months later...

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>

Notification_Center.png

Providence_Power_Yoga.png

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

Notification_Center.png

Providence_Power_Yoga.png

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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
  • 4 weeks later...

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!

Providence_Power_Yoga.png

Providence_Power_Yoga.png

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

Providence_Power_Yoga.png

Providence_Power_Yoga.png

Hi,

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

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

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.