Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • #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 https://www.screencast.com/t/wwzSdMvh6j

    Can you please help?

    Thanks
    Marco

    #1205158

    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(){
      ?>
      <script>
    (function($){
      $(window).load(function(){
          var s1 = $('#top.page-id-12491 #av_section_5 .av_one_third.av-equal-height-column').height();
        var s2 = $('#top.page-id-12491 #av_section_5 .av_one_third.av-equal-height-column .avia_textblock.box-shadow').height();
    
        if (s2 < s1) {
            $('#top.page-id-12491 #av_section_5 .av_one_third.av-equal-height-column .avia_textblock.box-shadow').css('height', s1 + "px");
        }
        else {}
        
      });
    })(jQuery);
    </script>
    <?php
    }
    add_action('wp_footer', 'new_custom_height_script');

    Please clear your browser cache and check.

    Best regards,
    Mike

    #1205186

    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: https://webers-testseite.de/pureinstall/nsgcouk/
    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.
    #1205208

    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 :-)
    Marco

    #1205209

    Hi Guenni,
    thank you for your answer :-)

    much appreciated.

    Marco

    #1205246

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

    Best regards,
    Mike

    #1205256

    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.

    2020-04-19_1518

    Thanks
    Marco

    #1205329

    Hi,
    Try this css:

    #top.page-id-12491 #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;
    }

    2020-04-19_163104.png

    Best regards,
    Mike

    #1205452

    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.

    https://www.ninserviziogratuito.co.uk/chat-room-londra-regno-unito (no space between rows)
    2020-04-20_1812

    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?

    Thanks
    Marco

    #1205736

    Hi,
    To add some padding between the rows, please try this css:

    #top.page-id-12491 .flex_column_table.av-equal-height-column-flextable {
    	padding-top: 40px;
    }

    After applying the css, Please clear your browser cache and check.
    Expected results:
    2020-04-21_043724.png

    Best regards,
    Mike

    #1205738

    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?

    thanks,
    Marco

    #1206141

    Hi,
    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:
    2020-04-22_051530.png
    Try looking at the margin option and add the margin you would like there, I added 50px to each row.
    2020-04-22_050716.png
    Please clear your browser cache and check.

    Best regards,
    Mike

    #1206143

    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.

    Marco

    #1206516

    Hi,
    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,
    Mike

    #1206520

    Hi Mike,
    thank you,

    yes you can close this one :-)

    Thanks,
    Marco

    #1206660

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

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

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