Weird lvca-grid behavior with v1.8

This topic is: resolved

This topic contains 16 replies, has 2 voices, and was last updated by Olivier Langlois Olivier Langlois 1 year, 6 months ago.

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #28774
    Olivier Langlois
    Olivier Langlois
    Participant
    Post count: 27

    I have tried to upgrade to the latest addon-pro version but I had to rollback to 1.7.5 because of a weird problem.

    The grid, which is configured to have 3 columns, after page load is done, configure itself for having an ugly 2 columns setup with an animation.

    I have recorded the behavior in the attached video file

    Attachments:
    #28777
    Olivier Langlois
    Olivier Langlois
    Participant
    Post count: 27

    and before you ask. with or without my lazy load modifs, it gives the same result…

    #28781
    Raghavendra
    Raghavendra
    Moderator
    Post count: 4607

    Can you try this custom CSS and see if that helps? –

    .lvca-container, .lvca-grid-container {
      -webkit-box-sizing: border-box;
              box-sizing: border-box; }
      .lvca-container *, .lvca-container *::after, .lvca-container *::before, .lvca-grid-container *, .lvca-grid-container *::after, .lvca-grid-container *::before {
        -webkit-box-sizing: inherit;
                box-sizing: inherit; }

    This change is already part of 1.8 but still I would give a try. Also, can you pls disable autooptimize once and see if that helps too? I have not been able to reproduce this on my server and hence would require your help reproducing this. Thanks

    #29018
    Olivier Langlois
    Olivier Langlois
    Participant
    Post count: 27

    Hi Raghavendra,

    I finally did have a chance to investigate a little bit more this problem.
    1. I have turn off Autooptimize: No improvement
    2. I have the following CSS tweak that I have commented out to rule out possible interference:
    .lvca-portfolio-wrap .lvca-portfolio .lvca-portfolio-item .hentry {
    padding: 10px;
    border: 1px solid #dfdfdf;
    border-radius: 5px;
    background: #fff;
    }

    .lvca-portfolio-wrap .lvca-portfolio .lvca-portfolio-item .entry-title {
    font-size: 26px;
    line-height: 28px;
    }

    .lvca-portfolio-wrap .lvca-portfolio .lvca-portfolio-item .lvca-project-image .lvca-image-info .lvca-terms a {
    display: none!important;
    }

    .entry-summary p {
    font-size: 18px;
    line-height: 28px;
    }

    No change. Still have the weid behavior.

    3. I will try with your custom CSS suggestion and I will also give 1.8.1 a try…

    and report back here if it helps.

    In the meantime, This is javascript code that is responsible for what I have. Any idea which function is taking the decision to change the column number from 3 to 2?

    #29019
    Olivier Langlois
    Olivier Langlois
    Participant
    Post count: 27

    Ok, I have noticed something that might explain the problem. According to firefox Inspection tool

    On 1.7.5 and 1.8.0, lvca_container is 1140 pixel wide.

    However

    the div lvca-block-column lvca-fourcol (Why fourcol if I have configure to have 3 cols??)
    On 1.7.5: 386.65px wide
    On 1.8.0: 386.667px wide

    #29026
    Olivier Langlois
    Olivier Langlois
    Participant
    Post count: 27

    Ok that is the best that I can do. I know nothing about NEAT or SASS

    the div lvca-block-column lvca-fourcol
    On 1.7.5: 386.65px wide
    On 1.8.0: 386.667px wide

    The problem is that lvca-block-column width multiplied 3 times exceed by 1 pixel the width of the container. lvca_block_inner which is 1160 px wide.

    lvca_block_inner is in a bootstrap framework container (1170px)

    I think that you have all you need to know to do your job and make a fix.

    thank you

    #29033
    Raghavendra
    Raghavendra
    Moderator
    Post count: 4607

    Thanks for all the inputs. Can I pls have the URL of the page where this is happening? That will help me get to the issue quickly. Thanks

    >> lvca-fourcol (Why fourcol if I have configure to have 3 cols??)

    Because three lvca-fourcol out of 12 columns makes it 3 column layout.

    #29035
    Olivier Langlois
    Olivier Langlois
    Participant
    Post count: 27

    This is a neat rounding error. If I change the following in lvca-frontend.css

    .lvca-gapless-grid .lvca-fourcol {
    width: calc(33.3333333333%);
    float: left;
    margin-left: 0px; }

    to

    .lvca-gapless-grid .lvca-fourcol {
    width: calc(33.33333%);
    float: left;
    margin-left: 0px; }

    my problem goes away

    #29037
    Olivier Langlois
    Olivier Langlois
    Participant
    Post count: 27

    https://olivierhealthtips.com/blog-posts/

    but it contain the fix. I guess that if you change the CSS dynamically to what it was, you might be able to trigger the problem.

    #29049
    Raghavendra
    Raghavendra
    Moderator
    Post count: 4607

    I was not able to reproduce the same within the developer tools. When I change the value to something like 34%, the third column moved to the next line. When I reverted back to the width something like (33.33333333333333333333%), it still maintained the layout. Can I know which browser you are checking this with? I am using Chrome.

    #29056
    Olivier Langlois
    Olivier Langlois
    Participant
    Post count: 27

    It was with firefox 57

    #29057
    Raghavendra
    Raghavendra
    Moderator
    Post count: 4607

    Thanks for bringing this to my attention. It is reproducible in FireFox and happens with isotope script enabled. The regular column grid that we use in many other places like Posts Blocks seems to work fine. Will explore ways to overcome this and get back to you.

    #29058
    Raghavendra
    Raghavendra
    Moderator
    Post count: 4607
    This reply has been marked as private.
    #29103
    Olivier Langlois
    Olivier Langlois
    Participant
    Post count: 27

    Raghavendra, ok sure. I will test tonight and report back here the result.

    Greetings,

    #29263
    Olivier Langlois
    Olivier Langlois
    Participant
    Post count: 27

    Raghavendra, ok. I had the chance to check the fix. It works like a charm. I’m so happy that you did took a look. I didn’t notice that no post was visible on mobile view (ouch!). That one slipped from away from my attention.

Viewing 15 posts - 1 through 15 (of 17 total)

The forum ‘WPBakery Page Builder Addons Support’ is closed to new topics and replies.