04. Adding Devices to Stylesheet Object

For rendering the devices breakpoints in CSS file of the site, we must add devices to the stylesheet object. which is responsible for parsing stylesheets. The file we are editing now is named base.php which can be found in following directory

elementor/core/files/css/base.php

In this file check for the following function in line number 627

css/base.php

private function init_stylesheet() {
	$this->stylesheet_obj = new Stylesheet();

	$breakpoints = Responsive::get_breakpoints();

	$this->stylesheet_obj
		->add_device( 'mobile', 0 )
		->add_device( 'tablet', $breakpoints['md'] )
		->add_device( 'desktop', $breakpoints['lg'] );
}

just add the devices you created to the stylesheet_obj using add_device() method. So the modification would be as code below:

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

css/base.php

private function init_stylesheet() {
	$this->stylesheet_obj = new Stylesheet();

	$breakpoints = Responsive::get_breakpoints();

	$this->stylesheet_obj
		->add_device( 'mobile', 0 )
		->add_device( 'tablet', $breakpoints['md'] )
		->add_device( 'desktop', $breakpoints['lg'] )
		->add_device( 'width480', $breakpoints['width480'] )
		->add_device( 'width540', $breakpoints['width540'] )
		->add_device( 'width640', $breakpoints['width640'] )
		->add_device( 'width700', $breakpoints['width700'] )
		->add_device( 'width750', $breakpoints['width750'] )
		->add_device( 'width800', $breakpoints['width800'] )
		->add_device( 'width840', $breakpoints['width840'] )
		->add_device( 'width900', $breakpoints['width900'] )
		->add_device( 'width940', $breakpoints['width940'] );
}

Files Attachment

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

17KB

base.php