CSS Grid Elementor Viewing Issues

Tagged: , ,

Author Posts

danishc May 2, 2021 at 4:54 am

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 May 2, 2021 at 4:55 am

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 May 3, 2021 at 10:01 am

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 May 3, 2021 at 10:20 am

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 May 3, 2021 at 10:30 am

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

Sebastian May 3, 2021 at 10:43 am

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 May 3, 2021 at 10:43 am

3.1.1 and 3.2.2, no luck 🙁

Sebastian May 3, 2021 at 11:19 am

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 May 3, 2021 at 11:24 am

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 May 3, 2021 at 11:28 am

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.