What form should the $query media query array have for an Elementor page builder function?


I’m building a theme with the Elementor page builder and I want to add some CSS output to certain elements. I hooked into the parse_css function.

I want to use the stylesheet::add_rules() function (code reference). This function takes three parameters:

Stylesheet::add_rules( string $selector, array|string $style_rules = null, array $query = null )

The first parameters, the $selector and the $style_rules are not so difficult:

     $post_css->get_stylesheet()->add_rules( $element->get_unique_selector(), [
    'width' => '300px',
   ] );

This is an example function where the element gets a width of 300px. The difficult thing here is the media query, $query. I know that parameter wants an array as input, but it doesn’t tell what kind of array or in which form.

I tried a lot of things. These are a few I thought logical:

    $query = ['(min-width: 600px)'];
    $query = ['@media (min-width: 600px)'];
    $query = [
    'min-width' => '600px',

The last one has the same form as the $style_rules parameter, but it doesn’t work.

I searched for examples, documentation, Github etc., all to no avail.

How can I change my $query input parameter so that the code is rendered with a media query?

Many thanks if you can provide me with an example!

, , ralphsmit 1 year 2020-07-13T06:10:28-05:00 0 Answers 64 views 0

Leave an answer