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
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?
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.
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”.
Hey Sebastian, you can turn on the Containers in Elementor experiments options. Basically, it replaces the old divception sections/columns with flexbox containers
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.
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.
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.
