Archived topic

Max width page loading (using VC plugin)

11 replies · Started by MaksymPS on January 31, 2016

Viewing posts 1–12 of 12

January 31, 2016 at 8:14 am #169288

Hi Tom,

I with pleasure use your theme with all addons, but I'm not good at HTML and CSS.
That's why I bought Visual Composer. As for me it is the easiest way to put in any place any block.

And I created my Home-page with this plugin. But the problem is in first few milliseconds of loading.
If you go to my website , at the begining of loading page you can see something like this:
http://piccy.info/view3/9343860/6ce05fd2096f35e59c7f0bade5ace632/orig/

and few milliseconds after it is max width page.

With your sections there isn't so result.

Can you help to fix it please?

January 31, 2016 at 10:23 am #169364

Hmm, interesting.

It looks like VC is forcing itself to go full width, but has to wait a second in order to initiate.

Try adding this CSS:

.vc_transform .container.grid-container {
    max-width: 100%;
}

That will make the GP container full width so VC doesn't have to force it.

Let me know :)

January 31, 2016 at 12:15 pm #169401

Wow, much better, thanks.
But text adapted, but background image/color still has few milliseconds of loading:

http://piccy.info/view3/9345332/7451362fe3635d921ae2987fb3777ac7/orig/

http://piccy.info/view3/9345343/96fc06c0357a03f7772a1b57e8271dd6/orig/

At least page not jumping :)

January 31, 2016 at 12:59 pm #169408

Hey, Tom

I just noticed that all the other pages on my website (including WooCommerce) have max width pages too!

The problem was only on the main page with ferst few milliseconds of loading..)

January 31, 2016 at 5:47 pm #169464

Grr, looks like VC adds their class to every page, even when it's not being added.

Try the edited CSS above: https://generatepress.com/forums/topic/max-width-page-loading-using-vc-plugin/#post-169364

February 1, 2016 at 12:16 am #169502

Nothing happened ;(

1st variant was much better

.vc_responsive .container.grid-container {
    max-width: 100%;
}

but it has applied to all pages...

Probably, I will try to get a solution of a problem from VC support.

Any way thanks :)

P.S. but if you have any new ideas, write, I will try it)

February 1, 2016 at 2:33 am #169515

I just noticed, that all pages that were edited by VC, have max width.
For example: page of product that edited by VC
http://piccy.info/view3/9346959/d52f049e12cd85c7c0801448ea4b43f1/orig/

All others page became normal.

Interesting thing:

With 1st code all pages on my site became max width.

.vc_responsive .container.grid-container {
    max-width: 100%;
}

With 2nd code only all pages wtaht edited by VC became max width (even those that I don't need).

.vc_transform .container.grid-container {
    max-width: 100%;
}

In all "Row stretch" settings I set this:
http://piccy.info/view3/9346978/38bb4176bac53ac7a3e8212743601d78/orig/

I have created a ticket about this.
If they help to solve it, I'll write you here (for the future).

February 1, 2016 at 9:25 am #169630

It would definitely be great if they provided a class in the <body> when VC was active (and not otherwise).

February 2, 2016 at 11:57 pm #170093

Hi Tom,

I got the answer from VC support:

"The jumping is because of the time required to load the styles and make the calculation in the js script to stretch the content. This delay unfortunately cannot be avoided..."

They gave an advice to install the next plugin, but I didn't agree do that (because I have a lot of information, that I will add on my home page, and it will take much time to load a page full first).

And then, they said:

"We are working on performance optimization with each update and I can assure you that this delay(jumping) will get even less in future."

Anyway, users of VC have to reconcile and wait for updates.

Any way thanks for help :)

February 3, 2016 at 12:05 pm #170215

No problem - they're using JavaScript to make it full width which is why there's a jump. Unless they move away from js I don't see how they'll fix it, but I'm interested to see it if they do :)

September 16, 2016 at 12:49 pm #227069

I do not know if this is still meaningful, but you can add css to just single VC page like this

Start building better websites today.