CSS Grid is not syncing with Elementor in Editor view

This topic contains 9 replies, has 2 voices, and was last updated by  Sebastian 7 months, 1 week ago.

Author Posts

danishc

Hello Sebastian,

I hope you are alright mate. I am having this issue with the latest (wordpress, ele, MT versions).

There used to be Elementor column row but I think they have removed it so I am targeting widget-wrap.

The CSS grid when viewed inside Elementor doesn’t match with the one in Microthemer, even if you load Elementor within Microthemer.

I am attaching screenshots
https://ibb.co/y55WcGs
https://ibb.co/C7hVhZ2

Thanks man


Sebastian

Hey,

I’m very well thanks!

This could be a bit tricky if Elementor now uses a different HTML structure on the frontend/editor for rows and columns. This would make custom CSS in general harder, not just when using Microthemer. They may get some kickback on that change. But I couldn’t see an example of it when I just did some tests using the latest free version. What Elementor modules have you used to build your content?

If you could send me a link to the page you’re working on that would be helpful.

Cheers,
Sebastian


danishc

Hey Sebastian,

It’s literally a section with headings and an image placed in it, nothing complicated at all. Unrelated question, if you have to pick a visual builder which one would you pick? Oxygen, bricks to other based on compatibility with MT.

I am so over elementor, every time I I try to do just a little more in terms of design, I have to jump several hoops to achieve it


danishc

Regarding the issue, I was avoiding divception by having all elements in container and applying it on widget wrap hence the issues.

If I make a column for each widget then apply the grid on elementor-container it seems to be behaving ok. but you will end up with as many columns as widget but thats how it is


Sebastian

Ah, I see it now. Grid rows and columns work as usual, but positioning items within the grid doesn’t work properly when Elementor is active. This is because the live editor inserts a div with the class “elementor-background-overlay” as the first child. This throws off the nth-child selectors Microthemer uses for positioning grid items.

From inspecting comments in Elementor’s code, it looks like they changed the structure of the HTML in version 3. Unfortunately I can’t think of a better workaround that your column approach right now.

Regarding MT compatibility, the integration with Oxygen is still the most recent. I will add integration with Bricks, but I’m waiting for them to fix some divception issues with container elements. This might be fully sorted in version 1.4, or a version soon after. I think Bricks could be the winner once it’s been developed a little bit more.

Cheers,
Sebastian


danishc

Hey Sebastian,

Yeah I agree, heard good stuff about Bricks and I reckon it has good potential. I will give them both a red hot go.

Thanks and keep up the great work with MT


Sebastian

You’re welcome!

P.S. I guess you solved the id issue (which you’ve now removed from you last reply) by setting it on the container?


danishc

I had to use two css grids on a single page, so when I targeted the .elementor-column-gap-default worked.

One thing I have to check out if ooh bois plugin removes the Elementor-row because I tried the same thing on local wordpress without Oohbois plugin and I can see the elementor-row class which works 100%


danishc

Ok so upon checking, CSS grid seems to be working fine where you have
<section>
<columns>
in that case you can use elementor-row and it will work just fine.

In the instance where you would need a complicated design

Section
Container/colum
innersetion

In that case I can find the elementor-row class, I had to then apply the class on .elementor-column-gap-default

All I know is I will be moving on from elementor asap lol


Sebastian

Oh I see, thanks for sharing your trials. I’m glad you’ve found something that’s workable for now.

You must login or register to reply to this topic.