Uneven boxes in styling

HTML-CSS
1

Hi All

I had created three columns but unsure why when I have some texts in each box and then the size of each blocks are are even according to the text. I would like each boxes to stay the same size regardless of how many texts.

This is the website

Chat with Me

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Bedding

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 

  <div class="col-4">
    <div class="box">
      <label> See More </label>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      </p>
    </div>
  </div>
</div>

div.box {
background-color: #fff;
box-shadow: 0 0 0 1px rgba(0,0,0, .15), 0 2px 3px 0 rgba(0,0,0,.1);
text-align: center;
border-radius: 4%;
margin: 24px;
padding: 36px 24px 40px 24px;

16%20pm
16%20pm1721×619 103 KB

2

Their flex container is set to align-self: center. That will cause them to center vertically (and only be high enough to contain their contents). Setting it to align-self: stretch (or removing it, since stretch is the default value) should fix…

…no, not really. It will stretch the col-4 divs, but the box divs in them won’t stretch. You can force them to stretch too by setting the col-4 as flex containers themselves.

3

@kevcomedia - thanks for your reply.

Can you please show me how to force stretch col-4?

Thanks

4 
.col-4 {
  display: flex;
}

But you may want to make a separate class for this, then add that class to the col-4 divs.

5

@kevcomedia thank you