03. Modifying Devices List

Now that you have followed Step 01 and Step 02 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.

responsive.php

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

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

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

responsive.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
];

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.

Frontend.php

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

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

Frontend.php

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