Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1141430

    Hi,
    can I make all symbol boxes (I have three in a row) the same height?
    One is not as tall as the other ones, cause there’s less text in it.
    Kind regards,
    Veronika

    #1141445

    Hey Loveronika,

    Can you provide a link to the site/page in question so we can look into this issue further.

    Best regards,
    Jordan Shannon

    #1141450

    Hi, please see private reply

    #1141465

    a very elegant method is to use the flex box modell:
    the align-items: stretch made the trick
    put the three iconboxes in a 1/1 container ! give to this 1/1 container the custom class: flex-iconboxes

    now put this to your quick css:

    /* mediaquery width depends on your settings ( maybe 768px) */
    
    @media (min-width: 990px) {
      .flex_column.flex-iconboxes {
      display: flex;
      flex-flow: nowrap row;
      justify-content: space-between;
      align-items: stretch;
    }
    
    .flex_column.flex-iconboxes::before, .flex_column.flex-iconboxes::after {
        display: none;
    }
    
    .flex-iconboxes .iconbox {
      flex: 0 1 30%;
      background-color: #e8e8e8 !important;
      border-radius: 5px;
      margin-bottom: 0 !important;
    }
    
    .flex-iconboxes .iconbox_content {
      box-shadow: none !important;
    }
    }

    result see here : https://webers-testseite.de/iconboxes-with-equalheight/

    if you got more than 3 boxes play with the 30% value ( 4 boxes : less than 24% ) etc

    #1143870

    Thank you Günni,
    Jordan, is it possible an easier way?

    #1143879

    Hi,

    It does not get easier than the css method.

    Best regards,
    Jordan Shannon

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