Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
  • #1204506

    Hi guys,
    I noticed that there is a new feature which allows me to have the columns of the same row same height..

    I set the feature for same height and then there is a second option which asks me if I want to align the colunt to top, center of bottom. Still not sure what this means considering that the first option should make all the boxes same height.

    This is if I align to the bottom

    Can you please help?



    Hey marcoabis81,
    Sorry for the late reply and thanks for the login. I believe that the inner box-shadow height is controlled by the content and does match the column height. You could remove your box-shadow and apply it to the columns for the full column height.
    Another option is to set the box-shadow height to the same as the column, which I did by adding this function to your functions.php

    function new_custom_height_script(){
          var s1 = $(' #av_section_5 .av_one_third.av-equal-height-column').height();
        var s2 = $(' #av_section_5 .av_one_third.av-equal-height-column').height();
        if (s2 < s1) {
            $(' #av_section_5 .av_one_third.av-equal-height-column').css('height', s1 + "px");
        else {}
    add_action('wp_footer', 'new_custom_height_script');

    Please clear your browser cache and check.

    Best regards,


    First of all – you gave the box-shadow to the text-block section? Why don’t you use the option on column – there is allready an option for that.

    here is my setting:
    put only these 1/3 columns in one color-section
    give a custom class or ID to the color-section ( i did with ID: flex-section )
    do not choose the equal height option ! ( we make that via flex modell )
    on the right column the text-block : i put the text in a span with custom-class

    then the css for quick css is:

    #flex-section .entry-content-wrapper {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-around;
      align-items: stretch;
    #flex-section .entry-content-wrapper::before, 
    #flex-section .entry-content-wrapper::after {
      display: none;
    #flex-section .entry-content-wrapper .flex_column {
      flex: 1 1 auto;
      min-width: 280px;
      margin-bottom: 50px;
    #flex-section .avia_textblock span {
        display: flex;
    @media only screen and (max-width: 1054px ) {
      #flex-section .entry-content-wrapper .flex_column:nth-of-type(1) {order: 1;}
      #flex-section .entry-content-wrapper .flex_column:nth-of-type(2) {order: 3;}
      #flex-section .entry-content-wrapper .flex_column:nth-of-type(3) {order: 2;}

    the flex: 1 1 auto; only makes sence if you reorder like in my example the columns.
    if you do not like to have the second under the two other columns in responsive case change it to: flex: 0 1 auto;

    • This reply was modified 1 year ago by  Guenni007.

    Hi Mike,
    thanks for the answer, I had tried the box at column level but when I did not like it when I had the 1st column 1/3 and a short text inside. It was not looking nice but with 3 1/3 columns is does thanks :-)

    Now, I added the shadow to the last raw (not column). How can I also add the border to the entire raw and also left and right padding? I do not see the options.

    Thanks for your help :-)


    Hi Guenni,
    thank you for your answer :-)

    much appreciated.



    I assume you found @guenni007 solution to work well, did you need more assistance or shall we close this?

    Best regards,


    Hi Mike,
    I followed yours, it’s easier without adding code :-)

    I asked something about the last box on the same page. How do I add a border to the row box? It allows me to add only shadow and margin top and bottom, no left and right padding.




    Try this css: #av_section_7 > div > div > div > div > div {
        border-width: 1px;
        border-color: #0a0a0a;
        border-style: solid;
        box-shadow: 0 0 10px 0 #74a6e8;
        padding: 0px 10px 0px 10px;
        border-radius: 5px;


    Best regards,


    Hi Mike,

    It worked thank you.

    However I noticed that sometimes when I set the column height equal for all columns, it does not save. I managed to save it only after several times I tried. And also I got a weird behaviour. Look at it please. (no space between rows)

    UPDATE: I just noticed that it does that if I set the columns same height. But I think this is not the result I have to get?



    To add some padding between the rows, please try this css: .flex_column_table.av-equal-height-column-flextable {
    	padding-top: 40px;

    After applying the css, Please clear your browser cache and check.
    Expected results:

    Best regards,


    Hi Nike,
    thank you for answering.

    I would not want to use a specific CSS on this one as I may be moving this element on different positions and not wanting to depend on a CSS per ID element.

    I would like to understand why it is behaving like that when I set the “same column height”. Is it a normal behaviour or is there something wrong? Same column height should not mean that all the element lose their padding all around.

    Can you please explain?



    I don’t think that the rows are losing any padding, I don’t believe there is added padding to the rows when they are stacked like this, the padding option under “styling” is for the “inner padding”, this is for the cells:
    Try looking at the margin option and add the margin you would like there, I added 50px to each row.
    Please clear your browser cache and check.

    Best regards,


    Hi Mike,
    Thanks for replying.

    Yes, I added the padding (internal to each cell) and that is ok.
    And thanks for making me notice that I can solve it with adding margin to each row.

    The question was: is it an expected behaviour that when I set the columns to have same column height, the space between the boxes disappear?
    Indeed, if I set column height “individual” I will have the space between them without adding the margin to each row.

    Anyway, solved.

    And once again, thank you for your patience. I appreciate it a lot.



    I’m not sure if this is expected behavior, I have asked for the dev team to check.
    So I assume we can close this then?

    Best regards,


    Hi Mike,
    thank you,

    yes you can close this one :-)



    Hi Marco,

    Glad we could help :)

    We are closing the thread.

    If you need further assistance please let us know in a new one.
    Best regards,

Viewing 16 posts - 1 through 16 (of 16 total)

The topic ‘Same height column does not work’ is closed to new replies.