[Resolved] View Design not carried forward in Elementor

[Author]

Posts

[samuelel]

I'm trying to style a View using the block editor. I need that view for a page designed with Elementor. However when I insert the View in Elementor most styles disappear. Applying custom classes to text/image in the view blocks doesn't have any effect. For example, here I want the text to wrap the image, but it won't work!

[Shane]

Hi Samuel,

Thank you for getting in touch.

Can you try inserting the view using its shortcode rather than using the elementor widget.

Use the elementor WYSIWYG editor block and insert the view with the shortcode below.
[wpv-view name='view-slug']

Replace 'view-slug' with the slug of your actual view and let me know if this helps.
Thanks,
Shane

[samuelel]

Well, it looks like something has screwed the website while I was doing these tests…

It looks like something is overriding part of the CSS that is applied with the bullaki_plugin and in the Toolset Layout CSS. As a result CSS is not applied correctly in the custom article pages created with Toolset. Would you be able to identify the issue at the source without trying to patch the CSS?

Here you can see a previous working version of the website: hidden link

This is the current website (which has new content): hidden link

As you can see the right navigation bar is not sticky anymore. The author’s affiliation looks weird. The font size has been changed. And from time to time I’m getting error 500.

Many thanks for the help!

[samuelel]

Well... I hope this communication is private... isn't it?

[Shane]

Hi Samuele

The private fields weren't enabled for your credentials, however i've since removed them.

I did do a check on the credentials and the URL that was provided but they don't seem to work. The URL results in a 404.

I've enabled the private fields for you, can you resend the credentials as well as checking to ensure that the URL and Login works.

Thanks,
Shane

[Shane]

HI Samuele,

Thank you for the video, I know that some optimization plugins can cause this issue when they cache some of our Toolset Scripts.

However there isn't a 1-1 comparison in your video. Is there a link in the copy that you've setup where I can see the views active on the frontend.

I at least need an example to see what is the cause of the issue.

Thanks,
Shane

[samuelel]

I removed them. You can repeat the same thing I did and you'll see that it doesn't work.

[Shane]

Hi Samuele,

This seems to be an edge case scenario however i'm still looking into this for you.

I've even setup a demo site to see if I can replicate the issue but the problem doesn't occur there.

I will keep you posted on any further findings.

Thanks,
Shane

[Shane]

Hi Samuele,

Please add the following to the css section of your view and it should resolve your issue.

.js-wpv-loop-wrapper > .tb-grid {
    grid-template-columns: minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr) minmax(0, 0.25fr);
    grid-auto-flow: row;
}

This should resolve your issue.

Thanks,
Shane