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

Fixed Buttons on 4-columns with boarder and dropshado


indy

Question

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

7 answers to this question

Recommended Posts

  • 0

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
  • 0

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

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

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

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

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

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

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