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

Question

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 = ['Traversy 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!

--------------------------------------------------

>>> Share a link to this question, just copy and paste the code bellow on your web page <<<

<a href="https://www.wptricks.com/question/what-form-should-the-query-media-query-array-have-for-an-elementor-page-builder-function/">

What form should the $query media query array have for an Elementor page builder function?</a>
0
, , ralphsmit 4 weeks 0 Answers 30 views 0

Leave an answer