> 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/02.-styling-breakpoints.md).

# 02. Styling Device Modes

Now that you have added devices / device modes, we now add styles so show the changes in responsive wrapper of editor panel.

The Editor styles are located in `editor.min.css` located at `elementor/assets/css` directory. editor.css and editor.min.css are same but elementor uses minified version, so for modifications to work you should include or add codes in minifed version of js or css files. 

When ever you change the device mode from responsive tab of editor panel, a class is added to `body` tag named  `elementor-device-xxxx` where `xxxx` is device name which is specified in `data-device-mode` attribute of template we edited/modified in [**Step 01**](/elementor/01.-the-editor-panel.md#override-default-markup-templates) of the tutorial 

### Adding Device Styles 

As explained above open `editor.min.css` and add the following styles to the file.

{% 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.min.css" %}

```css

/* 
+ Each Device mode atach ".elementor-device-DeviceName" to indicate type of device mode
+ Define Styles for each device width for selector ".elementor-device-DeviceName #elementor-preview-responsive-wrapper" 
+ where `DeviceName` is the custom device names
+ In our case I defined with "width" followed by device width number 
+ Eg : width540 for 540px width; 
 */

.elementor-device-width480 #elementor-preview-responsive-wrapper {
    width: 480px;
    height: 640px;
    padding: 40px 10px 70px; 
}

.elementor-device-width540 #elementor-preview-responsive-wrapper {
    width: 540px;
    height: 640px;
    padding: 40px 10px 70px; 
}

.elementor-device-width640 #elementor-preview-responsive-wrapper {
    width: 640px;
    height: 768px;
    padding: 40px 10px 70px; 
}

.elementor-device-width700 #elementor-preview-responsive-wrapper {
    width: 700px;
    height: 768px;
    padding: 40px 10px 70px; 
}

.elementor-device-width750 #elementor-preview-responsive-wrapper {
    width: 750px;
    height: 769px;
    padding: 40px 10px 70px; 
}

.elementor-device-width800 #elementor-preview-responsive-wrapper {
    width: 800px;
    height: 769px;
    padding: 40px 10px 70px; 
}

.elementor-device-width840 #elementor-preview-responsive-wrapper {
    width: 840px;
    height: 769px;
    padding: 40px 10px 70px; 
}

.elementor-device-width860 #elementor-preview-responsive-wrapper {
    width: 860px;
    height: 769px;
    padding: 40px 10px 70px; 
}

.elementor-device-width900 #elementor-preview-responsive-wrapper {
    width:900px;
    height: 769px;
    padding: 40px 10px 70px; 
}

.elementor-device-width940 #elementor-preview-responsive-wrapper {
    width:940px;
    height: 769px;
  	padding: 40px 10px 70px; 
}

/*Show only controls related to specific device and hide rest*/
body:not(.elementor-device-width480) .elementor-control.elementor-control-responsive-width480,
body:not(.elementor-device-width540) .elementor-control.elementor-control-responsive-width540,
body:not(.elementor-device-width640) .elementor-control.elementor-control-responsive-width640,
body:not(.elementor-device-width700) .elementor-control.elementor-control-responsive-width700,
body:not(.elementor-device-width750) .elementor-control.elementor-control-responsive-width750,
body:not(.elementor-device-width800) .elementor-control.elementor-control-responsive-width800,
body:not(.elementor-device-width840) .elementor-control.elementor-control-responsive-width840,
body:not(.elementor-device-width900) .elementor-control.elementor-control-responsive-width900,
body:not(.elementor-device-width940) .elementor-control.elementor-control-responsive-width940 {
  display: none;
}

/* Using Device Width instead of icon for convinence to specify type of device used */
.eicon-device-width480:before{ content: "480"; }
.eicon-device-width540:before{ content: "540"; }
.eicon-device-width640:before{ content: "640"; }
.eicon-device-width700:before{ content: "700"; }
.eicon-device-width750:before{ content: "750"; }
.eicon-device-width800:before{ content: "800"; }
.eicon-device-width840:before{ content: "840"; }
.eicon-device-width900:before{ content: "900"; }
.eicon-device-width940:before{ content: "940"; }

/* Styling Responsive Switchers as grid instead of Horizonal columns */
.elementor-control-responsive-switchers{
	flex-wrap: wrap !important;
	width: 100% !important;
	margin: 5px 0 !important;
}

/* indicating active responsive switcher */
.elementor-device-width480 .elementor-responsive-switcher-width480, 
.elementor-device-width540 .elementor-responsive-switcher-width540,
.elementor-device-width640 .elementor-responsive-switcher-width640,
.elementor-device-width700 .elementor-responsive-switcher-width700,
.elementor-device-width750 .elementor-responsive-switcher-width750,
.elementor-device-width800 .elementor-responsive-switcher-width800,
.elementor-device-width840 .elementor-responsive-switcher-width840,
.elementor-device-width900 .elementor-responsive-switcher-width900,
.elementor-device-width940 .elementor-responsive-switcher-width940 {
    background-color: #71d7f7;
}

```

{% endcode %}

I have added comments so that you can understand what it does.

### Files Attachment

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

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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/02.-styling-breakpoints.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.