Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • June 28, 2018 at 9:24 am #978799
    SvHa

    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 #978900
    Guenni007

    I 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.

    https://ibb.co/m43C4o

    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
    SvHa

    ..thank you – that sound good, but where can define the columns custom-class?
    …

    June 28, 2018 at 3:49 pm #978927
    Guenni007

    on 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 #978937
    SvHa

    okay 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
    SvHa

    …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 #979052
    Guenni007

    1) 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, 5 months ago by Guenni007.
    June 29, 2018 at 4:05 am #979178
    Vinay

    Hi,

    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,
    Vinay

    June 29, 2018 at 6:58 am #979192
    Guenni007

    hey 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_container

    2) 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 #979211
    Guenni007

    but 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 #979272
    SvHa

    thanks 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 #979688
    Rikard

    Hi,

    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

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.