r/elementor•
Dargus77

Elementor's Custom CSS boxes not parsing CSS correctly?

Problem

Is anyone experiencing any issues with their custom CSS as of lately?

When I use any kind of nested CSS syntax, it seems to not output those styles.

This applies both to the native nested CSS syntax as well as traditional media queries.

Here are some examples:

Example 1: Media Query

media (width > 767px){
    .project-item{
        aspect-ratio: 16 / 9;
    }
}

The above does not apply to the element (at all, you can't find it in the CSS), but this does:

media (min-width: 768px){
    .project-item{
        aspect-ratio: 16 / 9;
    }
}

Example 2: Nested CSS

.project-item{
    &::before{
        /* Ignore the fact there is no content style, Elementor adds it somewhere else. */
        z-index: 5;
        pointer-events: none;
    }
}

The above does not apply to the element (at all, you can't find it in the CSS), but this does:

.project-item::before{
    z-index: 5;
    pointer-events: none;
}

I feel like I must be going mad, I don't know what is going on.

Posted Oct 6, 2025, 7:09 PM UTC

02
Loading comments…