Hi,
I am trying to make icon boxes in columns the same height in a pricing menu. I have the cells set to equal height but they aren’t equal at all. What am I doing wrong?
Thanks.
Hey connect4consulting,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width: 990px) {
.iconbox_top .iconbox_content {
min-height: 235px;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
Hi Victoria, that worked perfectly as long as it is only text in the box, but when I add an icon it does not work anymore. Link to my staging site in private content.
Hi Terve,
Please try the following in Quick CSS under Enfold->General Styling:
.av_one_third .iconbox_content {
height: 400px;
min-height: 400px;
}
Best regards,
Rikard
Rikard, thank you for your promt reply!
We are almost there…… It worked well when I adjusted it to 280 px for screens that display the icon boxes in more than one column. For mobile phones though, I would rather stay with as it is (not equal size) as the boxes will be appearing in only one column. Is there a way to do this, but exclude screens that display the boxes in one column i.e mobile phones?
Hi Terve,
Here is the code you can put in Enfold > General Styling > Quick Css, if it does not work, put into themes/enfold/css/custom.css
@media only screen and (min-width: 768px) {
.av_one_third .iconbox_content {
height: 400px;
min-height: 400px;
}
}
If you need further assistance please let us know.
Best regards,
Victoria
That worked perfectly even with quick CSS. Thanks!
Hi Terve,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria