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

Preface

• There’s no WordPress-specific stuff in this answer, but I’m just trying to help since the official documentation is (as of writing) not very helpful..

• But as I said in the comments, I don’t use Elementor, which means I don’t know much about Elementor’s technical stuff. ( Even the non-technical ones, actually.. 🙂 )

The $query needs a min/max and a “device”

So the add_rules() method in the Elementor’s stylesheet class is using the add_query_hash() and hash_to_query() methods in the same class, then I checked the source and noticed that:

1. The $query array (the 3rd parameter for the add_rules() method) should have a min or max item, e.g. 'min' => 600 or 'max' => 799, or both.

2. There needs to be a “device” named the same as the min/max value in the $query array. And for registering a custom “device”, you can use the add_device() method in that class.

3. Additionally, the max value in the $query array must be within the range of the device sizes. For example in the below sample, the max is 799, so the max device size must be 800 or more.

Code I used for testing the add_rules():

Tested working, but not tried with the actual Elementor plugin.

$css = new Stylesheet;

$css->add_device( '600', 600 );
$css->add_device( '800', 800 );

// Outputs @media(min-width:600px){#foo{width:300px;}}
$css->add_rules( '#foo', [
  'width' => '300px',
], [
  'min' => 600,
] );

// Outputs @media(max-width:799px){#foo{height:400px;}}
$css->add_rules( '#foo', [
  'height' => '400px', // this is merely a test
], [
  'max' => 799,
] );

echo $css; // echoes the CSS media queries above
// It works because the class has a __toString() method.

Happy coding!