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

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

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

Hi, Joseph.

I would like the height and bottom to align.

Similar to this screenshot:

It is on https://www.dyson.ie/en

Then the example above should work for you ! Just copy paste it in Custom CSS

Thanks, Joseph, that worked perfectly, however, it doesn't work for the example below.

See screenshot.

Is there a way to achieve the same thing for different multiple rows like the 2nd screenshot attached?

@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)

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:

I tried that, Joseph, but this happened:

See screenshots below.

I can see why ! It has a different structure here(embeded rows), I can debug it for you !

Is that with CSS, Joseph?

The html structure has a row embedded in row but I can fix it with CSS. Give me 5 minutes. 

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

Joseph, you are a genius!

That worked perfectly.

Thank you so much.

Thank you for your help, too, @Ziggy.

I really appreciate it.

My pleasure. Do you have the possibility to accept my answer or give an upvote(up arrow on the left) ? Thank you in advance!

18 hours ago, joseph81 said:

My pleasure. Do you have the possibility to accept my answer or give an upvote(up arrow on the left) ? Thank you in advance!

Do you want me to upvote your first correct answer as well, Joseph?

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/

Hi. I will take a look at the structure and check why isn't the solution working on this. 

Did you add the new section id?

38 minutes ago, joseph81 said:

Hi. I will take a look at the structure and check why isn't the solution working on this. 

Did you add the new section id?

 

Yes, I did.

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.

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.