[Resolved] Custom elementor css is overwritten by GP

Home Forums Support Custom elementor css is overwritten by GP

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #1489312
    Matthias

    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

    #1489566
    Leo
    Staff
    Customer Support

    Hi there,

    Sorry what CSS are you referring to?

    Which element should I be inspecting?

    #1490054
    Matthias

    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.

    #1490059
    David
    Staff
    Customer Support

    Hi there,

    can you share the CSS that you have added to the Site in the Elementor CSS panel?

    #1490129
    Matthias

    Sure!

    Here you go:

    #level1 {
        display:none;
    }
    #level2 {
        display:none;
    }

    screenshot1
    screenshot2

    #1490133
    David
    Staff
    Customer Support

    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.

    #1490150
    Matthias

    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!

    #1490155
    David
    Staff
    Customer Support

    No problems. Glad to be of help

    #1492201
    Matthias

    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!

    #1492219
    David
    Staff
    Customer Support

    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.

    #1492247
    Matthias

    Got it! Thank you very much!

    #1492278
    David
    Staff
    Customer Support
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.