-
AuthorPosts
-
June 28, 2018 at 9:24 am #978799
Hi Enfold Team,
on my page i have 3 icon boxes next to each other. I want them all to have the same height even if the content is not the same amount. Is that possible?
Thanks a lot :-)June 28, 2018 at 2:41 pm #978900I would use the enfold resources to achieve it. Because equal-height columns are suitable for this. The look if you use iconbox is not equal height because only the icon-box content gets a background – the columns itself are equal height.
So the setup for that should be : icon-box with icon on top above the title – but with no borders !!!
every column ( in your case 1/3) gets the custom-class: equalboxes
and is now styled this way you like ( border , background, padding etc) padding is important because it looks without very ugly.The icons must be styled with colors background and icon color:
then do this to quick css:
.equalboxes .iconbox_top .iconbox_content { position: relative; top: -100px; background-color: transparent !important; } .equalboxes .iconbox_content_container { margin-bottom: -100px; } @media only screen and (max-width: 767px){ .equalboxes { margin-bottom: 80px !important; } }
see result: https://webers-testseite.de/equal-height/
June 28, 2018 at 3:28 pm #978914..thank you – that sound good, but where can define the columns custom-class?
…June 28, 2018 at 3:49 pm #978927on Enfold Options – Layout Builder : activate: Show element options for developers
Then you will have on the most alb elements a new input field for custom-class
June 28, 2018 at 4:12 pm #978937okay thanks – now I can set the custom class for each column – but the CSS doesn’t change anything :-( Any idea?
June 28, 2018 at 6:26 pm #978997…okay i tried something else: i applied the custom class to each iconbox – and at least something changed, but not right…
June 28, 2018 at 8:52 pm #9790521) that custom class goes to the 1/3 column – each! the 1/3 columns are set to equal height !
2) take in the 1/3 columns your icon-boxes with on top big icon – but no borders ( these settings you make to your 1/3 columns)the thing is to have equal height columns which looks like iconboxes – so edit the columns than with border , border-radius and maybe a background-color etc.
please show me the link to your site
- This reply was modified 6 years, 4 months ago by Guenni007.
June 29, 2018 at 4:05 am #979178Hi,
Another approach would be to add the icon box elements inside the columns and adjust the style as required.
Please check https://kriesi.at/documentation/enfold/icon-box/#equal-height-icon-box
If you like the pop out icons please use a negative top margin value for the icon box elements.
Hope this helps :)
Best regards,
VinayJune 29, 2018 at 6:58 am #979192hey Vinay – you read my solution –
that’s exactly my recommendation. The equal height columns are provided for that behavior. The problem is, when I put an icon box into it with all its styling ( background, border, border-radius etc) , it looks like it’s still not the same height ( allthough the surrounding column has same height)
I mimic, so to speak, an icon box by putting one in a column and leaving out the styling of the icon box – except for the icon itself. The appearance of the iconbox I take over then with the Columns. So border, border-radius, background etc.1) so my code above moves the on top icon over the border of the column (top: -100px) – that it looks like the iconbox itself.
moving the whole content to top border of the column results in a big empty bottom which is corrected via the negative margin of iconbox_content_container2) The transparency option is for having the chance to style the column as if it was the iconbox with border, border-radius , background.
you see it here – without that custom-class and with block-content settings : https://webers-testseite.de/equal-height/#without
June 29, 2018 at 9:14 am #979211but on animating that – i see this is better coding (shifting the whole box instead of content) – with same setting:
.equalboxes .iconbox.iconbox_top { position: relative; top: -100px; background-color: transparent !important; } .equalboxes .iconbox.iconbox_top { margin-bottom: -100px; } @media only screen and (max-width: 767px){ .equalboxes { margin-bottom: 80px !important; } }
June 29, 2018 at 11:26 am #979272thanks for your help and ideas. I solved it in another way: i created my “own” iconbox:
– 3 columns with equal height
– icon
– Text with custom class “iconboxtext”CSS:
.av_font_icon.av-icon-style-border .av-icon-char{
margin-top: -70px;
background-color: #719430;
border-color: #719430;
}.iconboxtext{
text-align: center;
}the only thing i have to solve is “mobile”
July 1, 2018 at 6:29 am #979688Hi,
Great, glad you found a solution and thanks for sharing. Please let us know if you should need any further help on the topic.
Thanks @guenni007 for helping out :-)
Best regards,
Rikard -
AuthorPosts
- You must be logged in to reply to this topic.