Make column height match row height

  • Resolved lukeg4

    (@lukeg4)


    9 years, 12 months ago

    I’d like to make the column height of some of my columns match the height of the row they’re located in.

    I’ve been able to do this so far by padding out the specific columns that I would like to take up the height of the row, but if the row height changes for any reason the padding either isn’t enough and ends up falling short of the full row height, or it’s too much and ends up increasing the row height where I’d rather it didn’t.

    I think there might be a more elegant solution to this; somehow setting the column height to the row height, so that it works no matter what, but I’m at the bottom of the steep css learning curve and I’m hoping for a bit of help on this one.

    My site is runparis.fr and the columns that I’d like to take up the full row height are the ones that are an “opaque black” to make the white text more legible.

    I hope someone can help like the many solutions to other problems I’ve solved on this excellent forum.

    Cheers, Luke

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    9 years, 12 months ago

    The overall row heights in question are set with min-height: 100vh; If you set the transparent (not opaque 🙂 ) background div height the same way, you should get the effect I believe you are after. For example, for the “Run Paris for Spring” block/column, add the min-height after the background color:

    .fl-node-57407f3470d69 .fl-col-content {
  background-color: rgba(0, 0, 0, 0.4);
  min-height: 100vh;
}

    You may wish to adjust the padding because the top of the container moved up, and the text is too close to the left edge, but I think you can work that out for yourself.

    Thread Starter lukeg4

    (@lukeg4)

    9 years, 12 months ago

    Thanks bcworkz, the solution worked beautifully and was exactly what I was chasing. Thanks for the fast reply, it’s really appreciated.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Make column height match row height’ is closed to new replies.