Page Header Image

Equal Height Columns?

0 Comment

Equal Height Columns?

Home › Forums › Um Profiler › Equal Height Columns?

Tagged: 

Viewing 4 reply threads
  • Author
    Posts
    • at #82472
      Hardpeterhardpeter
      Member

      Hi,
      I was wondering if anyone could direct me on how to make the columns in the member directory using Profiler Template/Style 9 equal heights?
      Not sure where I would change the divs etc to use flexbox or display:table css.

      Thanks in advance.
      Pete

    • at #82474
      Mike de Leeuw(staff)
      Keymaster

      Hi Pete,
      Please share a url and I Will have a look first.

      Mike

    • at #82475
      Hardpeterhardpeter
      Member

      Mike,
      Shoot, it’s on my local server. I could send you a screenshot.
      I am just not sure which <div>’s to customize either using flexbox:

      .col-container {
  display: flex;
  width: 100%;
}
.col {
  flex: 1;
  padding: 16px;
}

      or

      .col-container {
    display: table; /* Make the container element behave like a table */
    width: 100%; /* Set full-width to expand the whole page */
}
.col {
    display: table-cell; /* Make elements inside the container behave like table cells */
}

      Thanks

    • at #82477
      Hardpeterhardpeter
      Member

      Here’s a screenshot

      Attachments:

      1. Unequal-Here.jpg

    • at #82479
      Mike de Leeuw(staff)
      Keymaster

      Hi Pete,
      Sorry form my late response, I had a kidney stone emergency.
      It’s a bit hard without a live example because as you know we also have to fiddle with the css via Firefox. Before I can say that’s the one.

      But when I look at your screenshot, It will not be a solution I think. If you make all boxes the same height with custom css. It will look like cra…. If you click on the arrow it will slide down and all your other cards will be over the place. I don’t think this will work out, better make sure the content is consistent.

      Happy Saturday,
      Mike

  • Author
    Posts
Viewing 4 reply threads
  • You must be logged in to reply to this topic.