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.
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
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
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.
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%
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
