# 06. Final Step - Event Handling

Now in our final step we need to add devices to the event handler for this work. Now we will be editing `editor.min.js` file in following directory

`elementor/assets/js/`                                       

If you check the file it will contain minified version of `editor.js` in same directory. It will be hard to identify and modify particular variables in minified versions, so what you can do it modify the `editor.js` file and minifying it using online tools and replace the contents of `editor.min.js` with minified version of your modified code. 

### Register Devices in JS File

Open your Editor.js file and check for the following code in **line number 11145**

{% code title="Editor.js" %}

```javascript
initStylesheet: function() {
	var breakpoints = elementorFrontend.config.breakpoints;
	
	this.stylesheet = new Stylesheet();
	
	this.stylesheet
		.addDevice( 'mobile', 0 )
		.addDevice( 'tablet', breakpoints.md )
		.addDevice( 'desktop', breakpoints.lg );
},
```

{% endcode %}

just like we did earlier we will add our devices to the stylesheet object 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="Editor.js" %}

```javascript
initStylesheet: function() {
	var breakpoints = elementorFrontend.config.breakpoints;

	this.stylesheet = new Stylesheet();

	this.stylesheet
		.addDevice( 'width940', breakpoints.width940 )
		.addDevice( 'width900', breakpoints.width900 )
		.addDevice( 'width840', breakpoints.width840 )
		.addDevice( 'width800', breakpoints.width800 )
		.addDevice( 'width750', breakpoints.width750 )
		.addDevice( 'width700', breakpoints.width700 )
		.addDevice( 'width640', breakpoints.width640 )
		.addDevice( 'width540', breakpoints.width540 )
		.addDevice( 'width480', breakpoints.width480 )
		.addDevice( 'mobile', 0 )
		.addDevice( 'tablet', breakpoints.md )
		.addDevice( 'desktop', breakpoints.lg );
},
```

{% endcode %}

Now find the following `devices` variable at **line number** more or less to **5602**

{% code title="Editor.js" %}

```javascript
devices: [ 'desktop', 'tablet', 'mobile' ],
```

{% endcode %}

and replace it with following code adding devices to the list

{% 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="Editor.js" %}

```javascript
devices: [ 'desktop', 'tablet', 'mobile', 'width480', 'width540','width640','width700','width750','width800','width840','width900','width940'],
```

{% endcode %}

After Modifying the file replace the contents of `editor.min.js` file with the minified version of the above modified file.  You can use any online minifier tools like [JavaScript Minifier](https://javascript-minifier.com/), [Minifier](https://www.minifier.org/) which ever you like and replace it.<br>

{% hint style="info" %}
**Only if the minified version of js or css is used in Elementor, So make sure the modification is updated in minified files for this to work.**
{% endhint %}

### Files Attachment

In case you need more reference you can check the modified files i have included.&#x20;

{% file src="<https://3170465171-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHgGBX9vF4GiNQOxUUD%2F-LHntIMbLLOpJeJ04RmS%2F-LHntLfkDdMzsA-NkKRR%2Feditor.js?alt=media&token=8e29e487-b4ea-4420-abfc-dfea71dc53e8>" %}

{% file src="<https://3170465171-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LHgGBX9vF4GiNQOxUUD%2F-LHntykdk0wc9XZ8q82F%2F-LHnu0-vNqFWqFfPzRyA%2Feditor.min.js?alt=media&token=cd999722-479c-4146-ab41-52c703e41b32>" %}