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

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 )

Files Attachment

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

Last updated