Archived topic
Custom elementor css is overwritten by GP
11 replies · Started by Matthias on October 14, 2020
Hi there!
I am working with elementor on nested "read more sections". So, if you click on a button, the next section is toggled down and will be shown. For this effect I gave each section an unique id in the custom css panel of elementor. I also added the css display:none; as initial value. However this css will be overwritten on the frontend view by the stylemin.css or all.min.css depending on your GP css setting. Normally the in elementor inserted css shall be ruling.
I already contacted the elementor support, but they told me that this is a theme issue. I have heard that the issue might be due to the enqueue sequence of the different css files.
Best regards
Hi there,
Sorry what CSS are you referring to?
Which element should I be inspecting?
Hi Leo!
The css I am referring to is inserted into the custom css panel of elementor.
The section's IDs are #level1 and #level2. In the elementor editor these sections are not displayed because there the css code works.
Once published the css is overwritten by the theme, I guess.
Hi there,
can you share the CSS that you have added to the Site in the Elementor CSS panel?
Sure!
Here you go:
#level1 {
display:none;
}#level2 {
display:none;
}
In your Elementor Custom CSS is see this:
/* Start custom CSS for section, class: .elementor-element-6c4341d */
.elementor-19633 .elementor-element.elementor-element-6c4341d {
height: 300px;
]
/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-b262d0d */
#level1 {
display: none;
}
/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-8390e0b */
#level2 {
display: none;
}
/* End custom CSS */The first CSS property is broken - it has a ] instead of a }
CSS after a broken rule will not work.
Thank you so much, David! You made my day :-) Do you see that lovely smile on my face?!
The wrong css was inserted into a deactivated section. I did not investigate this section :-/
Anyway, it seems that I need glasses or a bigger font size.
Thanks a lot!
No problems. Glad to be of help
David, one more question to avoid such support requests... How did you get this specific elementor custom css output? Do you have to look into each css file and especially look for it or is there any certain location where I can find this summary?
Best regards!
Elementor inlines the CSS in the <head> of the site.
I found it by searching the Source in Developers Tools for your #ids which pointed me to the inline styles.
Got it! Thank you very much!
You're welcome
