CSS GRID Items look different than Elementor Editor's

Tagged: ,

Author Posts

danishc November 18, 2022 at 2:09 am

G’day Sebastian,

I hope you are doing well. I am working on a local installation with latest ele and ele pro and MT. I have the containers turn on.

However when I work with the CSS GRID, the child item locations dont match with what I see in Microthemer.

I am attaching both Screnshots here

CSS GRID ISSUE

danishc November 18, 2022 at 2:11 am

I am not sure if its related, but here is an error
Uncaught TypeError: Failed to execute ‘getComputedStyle’ on ‘Window’: parameter 1 is not of type ‘Element’. (line 1)
Microthemer discovered a JavaScript error on your site:

Error: Uncaught TypeError: Failed to execute ‘getComputedStyle’ on ‘Window’: parameter 1 is not of type ‘Element’.
URL: /wp-content/plugins/microthemer/js-min/deps.js?v=7.1.5.9&ver=6.1.1 (line 1)
Source: Microthemer interface

Sebastian November 18, 2022 at 2:28 pm

Hey Danish,

I’m very well thanks. Sorry to hear about this issue. It’s a bit tricky for me to diagnose without viewing the live site. But I can make some guesses.

1. I don’t think the error MT is reporting has anything to do with your grid issue, but I would like to fix that! I will test out MT with the latest version of Elementor and see if I can replicate it.

2. The 4 columns are working on the frontend, but not the positioning of the first item. I’m not sure why, but I suspect the HTML markup is slightly different in MT vs the frontend. That should not happen in general. But it would explain why the positioning isn’t working. MT uses :nth-child(1), but if another (hidden) element is comes before the first visible box the positioning would apply to that instead of the one that says “Designed with your environment in mind”.

Could you inspect the HTML of the container (and its items) on the frontend and in MT using Chrome’s inspection tools (right-click > Inspect)? And let me know if you see a difference?

Thanks,
Sebastian

danishc November 20, 2022 at 5:37 am

Hey Sebastian, thanks for your reply. I tried looking but its doing my head in.
Sorry not much of a help there but I can confirm that I tried the latest Ele and Elepro with and without pro.

Made a container. Dropped another container and then simply placed headings and items in it. I made one master container and then had separate containers for all elements.

So the result is the same so I am sure it will be straightforward to replicate.


Sebastian November 22, 2022 at 9:42 am

Hey Danish,

I’m just working on this now, trying to replicate it with the free version but haven’t so far. Excuse my ignorance but when you say container to you mean an “inner section” element, or something else? I can’t see an element called simply “container”.

Thanks,
Sebastian

danishc November 22, 2022 at 11:24 am

Hey Sebastian, you can turn on the Containers in Elementor experiments options. Basically, it replaces the old divception sections/columns with flexbox containers

danishc November 22, 2022 at 11:26 am

You can find the Experiennts under Elementor /Tools / Experiments flexbox containers

Sebastian November 22, 2022 at 12:53 pm

Hey Danish,

Thanks for the info about enabling the experimental containers, I missed that in your original post. I also checked on your screenshots a bit more carefully. I thought the issue was MT vs the frontend, but it’s actually MT vs editing with Elementor. And the issue is that the HTML Elementor adds when editing is a little different to the frontend. It has two hidden “.elementor-shape” elements that come before the content. And as I suspected, :nth-child(1) targets them when editing inside Elementor, instead of the visible content.

The only workaround I can think of for positioning grid elements, and having them display exactly the same in both contexts is to select the grid items individually and then switch from the usual container grid view to the item grid view in MT.

Watch this video for a demonstration.

Does that sound workable?

Cheers,
Sebastian

Sebastian November 22, 2022 at 2:09 pm

By the way, I’ve just released version 7.1.6.0 which fixes the uncaught TypeError you flagged and a performance issue that could sometimes happen when selecting elements, especially when a builder like Elementor is active.

danishc November 24, 2022 at 12:03 am

Hey Sebastian, Thanks for getting back to me with the alternative way. I guess, depending on the complexity, we could use it for now, otherwise I will get the content in first then make a grid.

Cheers

Sebastian November 24, 2022 at 8:01 pm

You’re right, adding all the content in one go and then just styling the grid outside of Elementor might be the simplest solution in many cases.

You must login or register to reply to this topic.