> For the complete documentation index, see [llms.txt](https://kodestat.gitbook.io/elementor/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kodestat.gitbook.io/elementor/05.-adding-devices-to-control-stack.md).

# 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" %}