Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #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 :-)

    #978900

    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/

    #978914

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

    #978927

    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

    #978937

    okay thanks – now I can set the custom class for each column – but the CSS doesn’t change anything :-( Any idea?

    #978997

    …okay i tried something else: i applied the custom class to each iconbox – and at least something changed, but not right…

    #979052

    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, 4 months ago by Guenni007.
    #979178

    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

    #979192

    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

    #979211

    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;
    }
    }
    #979272

    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”

    #979688

    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

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