> 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/03.-modifying-devices-list.md).

# 03. Modifying Devices List

Now that you have followed [Step 01](/elementor/01.-the-editor-panel.md) and [Step 02](/elementor/02.-styling-breakpoints.md) in adding devices and styling for Front-End , let's add the custom breakpoints to the extend the default breakpoints to the Back-End.

### Extending Default Breakpoints

Now we will edit `responsive.php` file which contains the **default breakpoints array** list. You can find the file in following directory

  `elementor/core/responsive/`                                                  

You can find the below code in `responsive.php`  at **line number 36**.

{% code title="responsive.php" %}

```php
private static $default_breakpoints = [
		'xs' => 0,
		'sm' => 480,
		'md' => 768,
		'lg' => 1025,
		'xl' => 1440,
		'xxl' => 1600,
	];
```

{% endcode %}

Now include the breakpoints you defined earlier. In our case modify the code to the following code

{% 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="responsive.php" %}

```php
private static $default_breakpoints = [
    'xs' => 0,
    'sm' => 480,
    'md' => 768,
    'lg' => 1025,
    'xl' => 1440,
    'xxl' => 1600,
    'width480' => 480,
    'width540' => 540,
    'width640' => 640,
    'width700' => 700,
    'width750' => 750,
    'width800' => 800,
    'width840' => 840,
    'width900' => 900,
    'width940' => 940
];
```

{% endcode %}

### Modifying Pattern Match

Now head over the following '**files'** folder in the same directory and find `frontend.php`, check for following code in **line number 31**.

{% code title="Frontend.php" %}

```php
$file_content = preg_replace_callback( '/ELEMENTOR_SCREEN_([A-Z]+)_([A-Z]+)/', function ( $placeholder_data ) use ( $breakpoints_keys, $breakpoints )
```

{% endcode %}

You can notice the **RegEx Pattern** **`/ELEMENTOR_SCREEN_([A-Z]+)_([A-Z]+)/`** it does not match our device pattern as we included numbers in our device name, so change the following **RegEx Pattern** match to **`/ELEMENTOR_SCREEN_([A-Z0-9]+)_([A-Z]+)/` ,** Now the above line will be as follows

{% code title="Frontend.php" %}

```php
$file_content = preg_replace_callback( '/ELEMENTOR_SCREEN_([A-Z0-9]+)_([A-Z]+)/', function ( $placeholder_data ) use ( $breakpoints_keys, $breakpoints )
```

{% endcode %}

### Files Attachment

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

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

{% file src="/files/-LHnr\_dAWfozYQN0pDde" %}