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 of the tutorial

Adding Device Styles

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

Please use copy button of the code panel, if you do manual select ,copy , paste it might break the code ! Gitbook Bug i guess..

Editor.min.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;
}

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.

111KB

editor.min.css

Open