Jump to content

CSS for aligning bottom of border box, regardless of the lines of text within the border box

Recommended Posts

Hi everyone,

 

Does anyone know how to make the bottom of border boxes (not sure if that is what they are called) align, regardless of the amount of text within each box using CSS.

 

Basically, the biggest box would dictate what the other boxes align to—not the text within said boxes.

 

See screenshots below:

 

Thanks in advance,

 

Steve.

 

https://www.artofair.ie/heat-pumps-in-ireland

Screenshot 2022-10-21 at 12.53.39.png

Link to comment

Just a detail questions: Would you like them bottom aligned or have the same height ?

If you want equal heights :

#page-section-63415f8d118f226aed28c197 {
    .row {
        display: flex;
    	flex-wrap: wrap;
    }
    .col {
        display: flex
    }
}

 

Edited by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment

@SteveBarrett This is a different solution, so hopefully helpful.

If you placed all of the items in a single code block you could use CSS grid to lay out the boxes and adjust them on tablet/mobile however you like, the boxes will stay even in height.

Add your content into the HTML in place of the <p>text</p> and add any styling to .grid-item in the CSS.

 HTML:

<div class="grid">
     <div class="grid-item">
       <p>text</p> 
     </div>
     <div class="grid-item">
       <p>text</p> 
     </div>
     <div class="grid-item">
       <p>text</p> 
     </div>
     <div class="grid-item">
       <p>text</p> 
     </div>      
</div>

Custom CSS:

// main grid style // 3x columns on desktop  //
.grid {
  display: grid; 
  grid-template-columns: 1fr 1fr 1fr;
  padding: 10px;
  gap:40px 20px;
}
// box style
.grid-item {
  text-align: left;
  border: 2px solid #416ba9;
}
// 2x columns on tablet
@media screen and (min-width:700px) and (max-width:1000px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}
// 1x columns on mobile
@media screen and (max-width:700px) {
  .grid {
    display: grid;
    grid-template-columns: 1fr;
  }
}

Hope that helps!

(If you want to have different code blocks with different columns needed, you'll need to use different classes to .grid and .grid-item throughout the code and CSS. e.g. .gridx4 and .gridx4-item)

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Yes, it did not work for the other section because it has a different section id:

section[data-section-id="63246fe928c9b3341a4f8163"],
section[data-section-id="63415f8d118f226aed28c197"] {
    .row {
        display: flex;
    	flex-wrap: wrap;
    }
    .col {
        display: flex
    }
}

You should add other section id-s separated with comma as in the example if you need more sections that need the same behavior.

To get the section id you can install a chrome plugin Squarespace ID finder and you will get this view:

image.thumb.png.52ca9ee65211c5e3db12d5e753884e46.png

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment
section[data-section-id="63415f8d118f226aed28c197"] {
    .row {
        display: flex;
    	flex-wrap: wrap;
    }
    .col {
        display: flex
    }
}
section[data-section-id="63246fe928c9b3341a4f8163"] {
    @media (min-width:768px) {
      .row .row {
          display: flex;
          flex-wrap: wrap;
      }
   
      .col .col {
          display: flex;
          .sqs-block {
             flex: 1;
          }
      }
    }
}
Edited by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment
19 hours ago, joseph81 said:
section[data-section-id="63415f8d118f226aed28c197"] {
    .row {
        display: flex;
    	flex-wrap: wrap;
    }
    .col {
        display: flex
    }
}
section[data-section-id="63246fe928c9b3341a4f8163"] {
    @media (min-width:768px) {
      .row .row {
          display: flex;
          flex-wrap: wrap;
      }
   
      .col .col {
          display: flex;
          .sqs-block {
             flex: 1;
          }
      }
    }
}

And finally, Joseph, is there a way to achieve the same affect with the screenshot below?

 

https://www.jumpfront.ie/

Screenshot 2022-10-22 at 11.20.07.png

Link to comment
section[data-section-id="63415f8d118f226aed28c197"] {
    .row {
        display: flex;
    	flex-wrap: wrap;
    }
    .col {
        display: flex
    }
}
section[data-section-id="63246fe928c9b3341a4f8163"],
section[data-section-id="62e92c8729e31102416039a2"] {
    @media (min-width:768px) {
      .row .row {
          display: flex;
          flex-wrap: wrap;
      }
   
      .col .col {
          display: flex;
          .sqs-block {
             flex: 1;
          }
      }
    }
}
section[data-section-id="62e92c8729e31102416039a2"] {
    @media (min-width:768px) {
      .col .col {
          .sqs-block-content {
             height: 100%;
             p {
                height: 100%;
             }
          }
      }
    }
}

 

Each of your section has different structure, for example this latest one has the box styling not on the outer container but directly on the paragraph, so it needs a different solution, like the one above. Anyway it works, I tried it, you can copy paste it.

Edited by joseph81

Jozsef Kerekes - Front-end developer and Squarespace enthusiast
My Blog: https://ui-workarounds.com
If you like my answer, please give me an upvote/like. Highly appreciated.

 

 

Link to comment
  • 2 weeks later...
On 10/22/2022 at 3:00 PM, joseph81 said:
section[data-section-id="63415f8d118f226aed28c197"] {
    .row {
        display: flex;
    	flex-wrap: wrap;
    }
    .col {
        display: flex
    }
}
section[data-section-id="63246fe928c9b3341a4f8163"],
section[data-section-id="62e92c8729e31102416039a2"] {
    @media (min-width:768px) {
      .row .row {
          display: flex;
          flex-wrap: wrap;
      }
   
      .col .col {
          display: flex;
          .sqs-block {
             flex: 1;
          }
      }
    }
}
section[data-section-id="62e92c8729e31102416039a2"] {
    @media (min-width:768px) {
      .col .col {
          .sqs-block-content {
             height: 100%;
             p {
                height: 100%;
             }
          }
      }
    }
}

 

Each of your section has different structure, for example this latest one has the box styling not on the outer container but directly on the paragraph, so it needs a different solution, like the one above. Anyway it works, I tried it, you can copy paste it.

Thank you again.

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.