Same height boxes

[xiuletverd]

Hi, I have a row with three columns inside and in these columns I have 3 icon boxes. These icon boxes have background and I would like it to be the same height, as the text inside has different lengths, so the background height changes depending on the text inside. Could you help me please?
Thank you!

Attachments:

You must be logged in to view attached files.

[Rui Guerreiro – SUPPORT]

Hi,

Can you provide the url to that page so we can provide some custom css?
Thanks

-Rui

[xiuletverd]

This reply has been marked as private.

[Rui Guerreiro – SUPPORT]

Thanks

Add the code below to your custom css option.

.page-id-12 .sf-icon-box.sf-icon-box-boxed-three .sf-icon-box-content-wrap {
    min-height: 335px!important;
}

-Rui

[xiuletverd]

Thank you.

But now it’s not responsive. I mean, it is ok when is in a full screen but if the screen is smaller, like in an iPad, it keeps wrong. Is there some way to fix the height in every screen or I should do css for each pixel screen width?

[Rui Guerreiro – SUPPORT]

Can you also try to add this custom css.

@media (min-width: 992px){
.page-id-12 .sf-icon-box.sf-icon-box-boxed-three .sf-icon-box-content-wrap {
    min-height: 358px!important;
}
}

@media screen and (min-device-width: 481px) and (max-device-width: 768px) { 
.page-id-12 .sf-icon-box.sf-icon-box-boxed-three .sf-icon-box-content-wrap {
    min-height: 470px!important;
}
}

@media screen and (max-device-width: 480px) { 
.page-id-12 .sf-icon-box.sf-icon-box-boxed-three .sf-icon-box-content-wrap {
    min-height: 270px!important;
}
}

-Rui