-
Posts
-
Hi Im following this thread https://kriesi.at/support/topic/icon-boxes-not-equal-height-2/ I have multiple pages with different height icon boxes. I put in this code but it only works for the icons on my first page
@media only screen and (max-width: 767px) {
.iconbox_top .iconbox_content {
min-height: 300px;
}
}How do I taget the icons on my other pages? I need 2 addtional min heights.
Hey amandahook62,
Thank you for the inquiry.
You may need to apply unique class names to the other Icon Boxes in order to target them specifically. Please check the link below for more info:
// https://kriesi.at/documentation/enfold/add-custom-css/#enable-custom-css-class-name-support
Once you’ve specified a unique class name (e.g., av-icon-box-height-large, av-icon-box-height-medium, av-icon-box-height-small), add the following css code using the new selector.
Example:
.av-icon-box-height-large .iconbox_content { min-height: 400px; } .av-icon-box-height-medium .iconbox_content { min-height: 300px; } .av-icon-box-height-small .iconbox_content { min-height: 200px; }Best regards,
Ismaelon general it is hard to get same height on containers that are not siblings.
If I have to fulfil this condition, then I imitate the icon box – see:
https://webers-testseite.de/iconboxes/
I then use the option of forcing these columns to the same height via flex-box layout. I can then use it for this construction at any time via the user-defined class.
Nice side effect: I can use the extra features of a standalone icon.
- You must be logged in to reply to this topic.