'Css even height columns so all text shows

I am having trouble with these columns showing all text and setting height to 100% does nothing. Please see this page https://www.yogibanker.com/about with the three boxes titled Precision, Passion and Performance. I am specifically talking about the text in the box is cut off due to the coloured background not being tall enough.

cssheight


Solution 1:[1]

You have some fixed (and rather small) settings for the height of card__text.

For example, with a wide viewport these settings:

@media (min-width: 768px)
.card__text {
    height: 90px;
}
@media (min-width: 1024px)
.card__text {
    height: auto;
}
@media (min-width: 1300px)
.card__text {
    height: 60px!important;
}

I can't understand these - in this case the wider the screen the shorter the text area. And why the important setting?

First suggestion would be to scrap all these and let the height settle itself and see what happens. As you have control (I assume) of the content itself and as it isn't particularly long currently would leaving it to find its own height actually be a problem?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 A Haworth

Related Questions