Weird lvca-grid behavior with v1.8

[Olivier Langlois]

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

[Olivier Langlois]

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

[Raghavendra]

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

[Olivier Langlois]

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?

[Olivier Langlois]

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

[Olivier Langlois]

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

[Raghavendra]

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.

[Olivier Langlois]

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

[Olivier Langlois]

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.

[Raghavendra]

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.

[Olivier Langlois]

It was with firefox 57

[Raghavendra]

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.

[Raghavendra]

This reply has been marked as private.

[Olivier Langlois]

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

Greetings,

[Olivier Langlois]

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.

[Author]

Posts