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 post
  • Answers 2
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Posts

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

@RyanDejaegher - PERFECT! Thank you very much!!!!   Best, Scott

Posted Images

2 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 post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...