# 05. Adding Devices to Control Stack

Now we have to add our custom devices to the default controls, so search for file named `control-stack.php` in following directory

`elementor/includes/base/control-stack.php`                                    

### A. Defining Device Constants

In this file check for the following function in line ***number 19*** you will find following codes

{% code title="control-stack.php" %}

```php
abstract class Controls_Stack {

	/**
	 * Responsive 'desktop' device name.
	 */
	const RESPONSIVE_DESKTOP = 'desktop';

	/**
	 * Responsive 'tablet' device name.
	 */
	const RESPONSIVE_TABLET = 'tablet';

	/**
	 * Responsive 'mobile' device name.
	 */
	const RESPONSIVE_MOBILE = 'mobile';

```

{% endcode %}

As you can see there are constant defined for each device so let's add ours too and te result will be as follows

{% hint style="warning" %}
Please use copy button of the code panel, if you do manual select ,copy , paste it might break the code ! Gitbook Bug i guess..
{% endhint %}

{% code title="control-stack.php" %}

```php
abstract class Controls_Stack {

	/**
	 * Responsive 'desktop' device name.
	 */
	const RESPONSIVE_DESKTOP = 'desktop';

	/**
	 * Responsive 'tablet' device name.
	 */
	const RESPONSIVE_TABLET = 'tablet';

	/**
	 * Responsive 'mobile' device name.
	 */
	const RESPONSIVE_MOBILE = 'mobile';
	
	/**
	 * Defining New Responsive Devices Control Stack variables
	 */
	const RESPONSIVE_WIDTH480 = 'width480';
	const RESPONSIVE_WIDTH540 = 'width540';
	const RESPONSIVE_WIDTH640 = 'width640';
	const RESPONSIVE_WIDTH700 = 'width700';
	const RESPONSIVE_WIDTH750 = 'width750';
	const RESPONSIVE_WIDTH800 = 'width800';
	const RESPONSIVE_WIDTH840 = 'width840';
	const RESPONSIVE_WIDTH900 = 'width900';
	const RESPONSIVE_WIDTH940 = 'width940';
	
```

{% endcode %}

### B. Adding Defined Constants to control list functions

Check for following function in the same file more or less at **line number 815**

{% code title="control-stack.php" %}

```php
final public function add_responsive_control( $id, array $args, $options = [] ) {
	$args['responsive'] = [];
	$devices = [
		self::RESPONSIVE_DESKTOP,
		self::RESPONSIVE_TABLET,
		self::RESPONSIVE_MOBILE,
	];
```

{% endcode %}

You can see line **number 3** the `$devices` array variable, just add our defined constants in **Step A** here. So the resulted function will be as follows

{% hint style="warning" %}
Please use copy button of the code panel, if you do manual select ,copy , paste it might break the code ! Gitbook Bug i guess..
{% endhint %}

{% code title="control-stack.php" %}

```php
final public function add_responsive_control( $id, array $args, $options = [] ) {
	$args['responsive'] = [];
	$devices = [
		self::RESPONSIVE_DESKTOP,
		self::RESPONSIVE_TABLET,
		self::RESPONSIVE_MOBILE,
		self::RESPONSIVE_WIDTH480,
		self::RESPONSIVE_WIDTH540,
		self::RESPONSIVE_WIDTH640,
		self::RESPONSIVE_WIDTH700,
		self::RESPONSIVE_WIDTH750,
		self::RESPONSIVE_WIDTH800,
		self::RESPONSIVE_WIDTH840,
		self::RESPONSIVE_WIDTH900,
		self::RESPONSIVE_WIDTH940
	];
```

{% endcode %}

Similarly now do the same thing in another function,check for following function in the same file more or less at **line number 915**

{% code title="control-stack.php" %}

```php
final public function remove_responsive_control( $id ) {
	$devices = [
		self::RESPONSIVE_DESKTOP,
		self::RESPONSIVE_TABLET,
		self::RESPONSIVE_MOBILE,
	];
```

{% endcode %}

You can see line **number 2** the `$devices` array variable, just add our defined constants in **Step A** here. So the resulted function will be as follows

{% hint style="warning" %}
Please use copy button of the code panel, if you do manual select ,copy , paste it might break the code ! Gitbook Bug i guess..
{% endhint %}

{% code title="control-stack.php" %}

```php
final public function remove_responsive_control( $id ) {
	$devices = [
		self::RESPONSIVE_DESKTOP,
		self::RESPONSIVE_TABLET,
		self::RESPONSIVE_MOBILE,
		self::RESPONSIVE_WIDTH480,
		self::RESPONSIVE_WIDTH540,
		self::RESPONSIVE_WIDTH640,
		self::RESPONSIVE_WIDTH700,
		self::RESPONSIVE_WIDTH750,
		self::RESPONSIVE_WIDTH800,
		self::RESPONSIVE_WIDTH840,
		self::RESPONSIVE_WIDTH900,
		self::RESPONSIVE_WIDTH940
	];

```

{% endcode %}

Now save it and let's head to final step.

### Files Attachment

In case you need more reference you can check the modified files i have included. 

{% file src="/files/-LHnsQG4pRhhhpW9Ahml" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://kodestat.gitbook.io/elementor/05.-adding-devices-to-control-stack.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.