CSS Grid Elementor Viewing Issues

This topic contains 9 replies, has 2 voices, and was last updated by  Sebastian 4 days, 10 hours ago.

Author Posts

danishc

Hello all, Just wondering if there is any way to view the CSS grid alongside Elementor properly?

It shows up at a width of 25% for each column which is annoying when you want to edit content.

https://ibb.co/KF1bK3J

I have used the grid on Elementor – row and have set the column 25 width to 100%. It shows up fine when not viewed in Elementor but it is all cropped up when you want to make changes to it


danishc

https://ibb.co/KF1bK3J

here is the link: It looks fine but when I edit with elementor, its shows up as the screenshot. Which makes is almost useless to edit with elementor

http://www.eplottemp.artillerygroup.com.au/elementor-631/


Sebastian

Hey, thanks for reporting this. It sounds like Elementor is applying some CSS that overrides MT CSS when Elementor is active. However, I wasn’t able to replicate this issue when testing with Elementor versions 3.1.1 and 3.2.2 (the latest at the time of writing).

On the versions of Elementor I tested on, the .elementor-row class has been replaced with .elementor-container. Which version of Elementor are you using?

Thanks,
Sebastian


danishc

Hey Sebastian,

I am using the latest Elementor & Epro with the latest updated Microthemer. I will try it with older versions of the elementor too and see if that makes any differencece


danishc

Hey Sebastian, I have rollbacked to Elementor 3.2.0 and E-Pro 3.2.1 and its still the same


Sebastian

OK, I currently only have the free version (of the latest version). This may be specific to E-Pro or some other configuration on your site. Would you mind providing temporary access to your site via our secure contact form?

Thanks,
Sebastian


danishc

3.1.1 and 3.2.2, no luck 🙁


Sebastian

Thanks for providing access. It looks like there was a typo when you tried to set 100% width for all grid items. You set 100%^ – see screenshot below.

100% width typo

I found that value in your suggested values dropdown. And when I corrected it, the columns display correctly even when Elementor is active. I’ve now cleared the suggestion so it won’t crop up again BTW.

The reason it was working outside of Elementor, is that you had a general selector that was valid on the frontend but not when Elementor was active:

.elementor-row > .elementor-col-25

I guess elementor removes the elementor-col-25 class when actively editing.


danishc

Lol my typos are bad, but you are a legend. Thank you so much for your support and please market your plugin. I am a designer and learning css and javascript, once I get good I would happily get behind your plugin and recommend to as many as I can.

Keep up the great work, and as suggest, if you can make a video of integrating Gsap maybe just a simple heading animation using tween.max, it would be amazing.

Have a good one!

Danish


Sebastian

Thanks Danish, I really appreciate that. I see you’ve already done pretty well creating complex grid layouts that adapt to different devices using Microthemer 🙂

And I will certainly get around to GSAP stuff in future.

All the best,
Sebastian

You must login or register to reply to this topic.