🔗 🐞 CSS not generating for all devices. Specially for tablet. (Related to #19894) - [ED-8329]

[sayedulsayem]

Prerequisites

• I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• The issue still exists against the latest stable version of Elementor.

Description

Hello. To demonstrate the error I've created a simple widget:

/**
 * Plugin Name: Sample Addons
 * Description: Sample Addons - For reporting a bug
 * Author URI:  https://sayedulsayem.com/
 * Plugin URI:  https://sayedulsayem.com/
 * Version:     1.0.0
 * Author:      sayedulsayem
 * Text Domain: sample-addons
 * Domain Path: /language
 */

function register_new_widgets($widgets_manager) {

	class Elementor_Widget_1 extends \Elementor\Widget_Base {

		public function get_name() {
			return 'widget_1';
		}

		public function get_title() {
			return esc_html__('Widget 1', 'plugin-name');
		}

		public function get_icon() {
			return 'eicon-code';
		}

		protected function register_controls() {

			$this->start_controls_section(
				'content_section',
				[
					'label' => esc_html__('Style', 'plugin-name'),
					'tab' => \Elementor\Controls_Manager::TAB_CONTENT,
				]
			);

			$this->add_responsive_control(
				'padding',
				[
					'label' => __('Padding', 'plugin-name'),
					'type' => \Elementor\Controls_Manager::SLIDER,
					'size_units' => ['px'],
					'range' => [
						'px' => [
							'min' => 0,
							'max' => 500,
						],
					],
					'default' => [
						'size' => 10,
						'unit' => 'px',
					],
					'selectors' => [
						'(desktop) {{WRAPPER}} .test' => 'padding-left:{{SIZE}}{{UNIT}}; padding-top: 0; padding-bottom: 0;',
						'(tablet) {{WRAPPER}} .test' => 'padding-left:0; padding-top: {{SIZE}}{{UNIT}}; padding-bottom: 0;',
						'(mobile) {{WRAPPER}} .test' => 'padding-left:0; padding-top: 0; padding-bottom: {{SIZE}}{{UNIT}};',
					],
				]
			);

			$this->end_controls_section();
		}

		protected function render() {
			echo "<p class='test' style='background-color: #dadada'>Test Paragraph</p>";
		}
	}

	$widgets_manager->register(new \Elementor_Widget_1());
}
add_action('elementor/widgets/register', 'register_new_widgets');

I changed my code from

'(desktop) {{WRAPPER}} .test' => 'padding-left:{{padding.SIZE}}{{UNIT}}; padding-top: 0; padding-bottom: 0;',
'(tablet) {{WRAPPER}} .test' => 'padding-left:0; padding-top: {{padding_labet.SIZE}}{{UNIT}}; padding-bottom: 0;',
'(mobile) {{WRAPPER}} .test' => 'padding-left:0; padding-top: 0; padding-bottom: {{padding_mobile.SIZE}}{{UNIT}};',

to this for making it compatible with Elementor 3.7.7 cause the previous code was throwing errors like this issue: #19894
So, I changed my code like the below.

'(desktop) {{WRAPPER}} .test' => 'padding-left:{{SIZE}}{{UNIT}}; padding-top: 0; padding-bottom: 0;',
'(tablet) {{WRAPPER}} .test' => 'padding-left:0; padding-top: {{SIZE}}{{UNIT}}; padding-bottom: 0;',
'(mobile) {{WRAPPER}} .test' => 'padding-left:0; padding-top: 0; padding-bottom: {{SIZE}}{{UNIT}};',

The following code is not generating CSS for tablets. It was taking only mobile value.
For example, I input the padding value desktop = 100px, tablet = 80px and mobile = 50px.
here is the output of generated CSS

.elementor-6 .elementor-element.elementor-element-59fd369 .test {
    padding-left: 100px;
    padding-top: 0;
    padding-bottom: 0;
}

@media(max-width: 1024px) {
    .elementor-6 .elementor-element.elementor-element-59fd369 .test {
        padding-left:0;
        padding-top: 50px;
        padding-bottom: 0;
    }
}

@media(max-width: 767px) {
    .elementor-6 .elementor-element.elementor-element-59fd369 .test {
        padding-left:0;
        padding-top: 0;
        padding-bottom: 50px;
    }
}

which is not correct. The expected generated CSS should be like

.elementor-6 .elementor-element.elementor-element-59fd369 .test {
    padding-left: 100px;
    padding-top: 0;
    padding-bottom: 0;
}

@media(max-width: 1024px) {
    .elementor-6 .elementor-element.elementor-element-59fd369 .test {
        padding-left:0;
        padding-top: 80px;
        padding-bottom: 0;
    }
}

@media(max-width: 767px) {
    .elementor-6 .elementor-element.elementor-element-59fd369 .test {
        padding-left:0;
        padding-top: 0;
        padding-bottom: 50px;
    }
}

I hope you guys are going to take a look at that matter and provide feedback.

Steps to reproduce

1. Create a test addon and register the test widget above.
2. Place the widget on the page.
3. Try to change the padding value for different devices like desktops, tablets, and mobile. You will notice that it will change only for desktop and mobile not changing anything for tablets.
4. You notice no CSS generated for tablets on the front end by checking Elementor's page-specific CSS in post-<post-id>.css which I already told you in the description.

Isolating the problem

• This bug happens with only Elementor plugin active (and Elementor Pro).
• This bug happens with a Blank WordPress theme active (Hello theme).
• I can reproduce this bug consistently using the steps above.

System Info

Click to reveal

					
== Server Environment ==
	Operating System: Darwin
	Software: Apache/2.4.54 (Unix) PHP/7.4.30
	MySQL version: MySQL Community Server - GPL v8.0.29
	PHP Version: 7.4.30
	PHP Memory Limit: 1024M
	PHP Max Input Vars: 1000
	PHP Max Post Size: 512M
	GD Installed: Yes
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 6.0.2
	Site URL: http://localhost/panel/random-wp
	Home URL: http://localhost/panel/random-wp
	WP Multisite: No
	Max Upload Size: 512 MB
	Memory limit: 40M
	Max Memory limit: 1024M
	Permalink Structure: /%year%/%monthnum%/%day%/%postname%/
	Language: en-US
	Timezone: 0
	Debug Mode: Inactive

== Theme ==
	Name: Hello Elementor
	Version: 2.6.1
	Author: Elementor Team
	Child Theme: No

== User ==
	Role: administrator
	WP Profile lang: en_US
	User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36

== Active Plugins ==
	Elementor
		Version: 3.7.7
		Author: Elementor.com

	Elementor Pro
		Version: 3.7.3
		Author: Elementor.com

	Sample Addons
		Version: 1.0.0
		Author: sayedulsayem


== Elementor Experiments ==
	Optimized DOM Output: Active by default
	Improved Asset Loading: Active by default
	Improved CSS Loading: Active by default
	Inline Font Icons: Inactive by default
	Accessibility Improvements: Active by default
	Additional Custom Breakpoints: Active by default
	Import Export Template Kit: Active by default
	Hide native WordPress widgets from search results: Active by default
	admin_menu_rearrangement: Inactive by default
	Flexbox Container: Inactive by default
	Default to New Theme Builder: Active by default
	Hello Theme Header & Footer: Active by default
	Landing Pages: Active by default
	Color Sampler: Active by default
	Favorite Widgets: Active by default
	Admin Top Bar: Active by default
	Page Transitions: Active by default
	Notes: Active by default
	Form Submissions: Active by default
	Scroll Snap: Active by default


== Log ==
	
JS: showing 1 of 1JS: 2022-09-27 07:19:37 [error X 4][../wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.7.7:3:767341] Cannot read properties of undefined (reading \'toLowerCase\') 



== Elementor - Compatibility Tag ==
	
	Elementor Pro: Compatible

== Elementor Pro - Compatibility Tag ==
	

				

[nicholaszein]

Hello @sayedulsayem!

Thank you for reporting this issue. A fix is already underway! 🙌

Best regards

[rami-elementor]

Hi @sayedulsayem

I've talked to @udidol to try to help you.

Your widget logic is problematic. You have a slider control that updates the padding. But you are updating different CSS properties in different breakpoints.

'selectors' => [
  '(desktop) {{WRAPPER}} .test' => 'padding-left:{{SIZE}}{{UNIT}}; padding-top: 0; padding-bottom: 0;',
  '(tablet) {{WRAPPER}} .test' => 'padding-left:0; padding-top: {{SIZE}}{{UNIT}}; padding-bottom: 0;',
  '(mobile) {{WRAPPER}} .test' => 'padding-left:0; padding-top: 0; padding-bottom: {{SIZE}}{{UNIT}};',
]

It's a bad practice with side effects, we don't recommend doing that.

The best way to achieve this is to create 3 different controls for padding-left, padding-top and padding-bottom.

$this->add_responsive_control(
	'padding-left',
	[
		'label' => __('Padding Left', 'plugin-name'),
		'type' => \Elementor\Controls_Manager::SLIDER,
		'size_units' => ['px'],
		'range' => [
			'px' => [
				'min' => 0,
				'max' => 500,
			],
		],
		'default' => [
			'size' => 10,
			'unit' => 'px',
		],
		'selectors' => [
			'{{WRAPPER}} .test' => 'padding-left:{{SIZE}}{{UNIT}}; padding-top: 0; padding-bottom: 0;',
		],
	]
);

Or, even better, use the dimensions control:

$this->add_responsive_control(
	'padding',
	[
		'label' => esc_html__( 'Padding', 'textdomain' ),
		'type' => \Elementor\Controls_Manager::DIMENSIONS,
		'size_units' => [ 'px' ],
		'selectors' => [
			'{{WRAPPER}} .test' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
		],
	]
);

Try to stick to the examples in the developer docs. We documented there only stable features. The use of (desktop), (tables) and (mobile) is not recommended as they are not taking into account other breakpoints. We may stop supporting this syntax in the future.

[sayedulsayem]

@rami-elementor

The reported code simply demonstrates the issue. The actual case is a little more involved.

I already know your mentioned process, but it won't cover my actual case. I want to generate different CSS for different devices which your mentioned method won't cover by using a slider or dimensions control.

I want to place (desktop), (tablet), and (mobile) on the selector as long as it is supported. I found that usage on the Elementor Pro share button widget too. See the snippet below:

// file path: elementor-pro/modules/share-buttons/widgets/share-buttons.php line 312 to 326
$this->add_responsive_control(
	'column_gap',
	[
		'label' => esc_html__( 'Columns Gap', 'elementor-pro' ),
		'type' => Controls_Manager::SLIDER,
		'default' => [
			'size' => 10,
		],
		'selectors' => [
			'{{WRAPPER}}' => '--grid-side-margin: {{SIZE}}{{UNIT}}; --grid-column-gap: {{SIZE}}{{UNIT}}; --grid-row-gap: {{SIZE}}{{UNIT}}',
			'(tablet) {{WRAPPER}}' => '--grid-side-margin: {{SIZE}}{{UNIT}}; --grid-column-gap: {{SIZE}}{{UNIT}}',
			'(mobile) {{WRAPPER}}' => '--grid-side-margin: {{SIZE}}{{UNIT}}; --grid-column-gap: {{SIZE}}{{UNIT}}',
		],
	]
);

You mentioned it won't cover additional breakpoints and in the future, you are going to remove it. Right now, I am not concerned with additional breakpoints. I will handle it on my own if needed.

Conclusion: The actual issue is that it is not generating CSS for (tablet) but is generating CSS for (desktop) and (mobile) which is straightforward.

[arielk]

This issue has been resolved in Elementor v3.8.0-beta-5

Feel free to update

Thanks!

[parasshah195]

@arielk @nicholaszein Seems that this issue still persists in the case where the widget/control is added in a Footer template and then added in another page using Shortcode. On the page that the shortcode is embedded, the responsive styles don't seem to be pulled in and outputted in the frontend CSS.

[nicholaszein]

Hello @parasshah195!

Thanks for giving your feedback. I'll discuss this with my manager and see if I can reproduce what you mentioned here. 🙏

[hein-obox]

@parasshah195 @nicholaszein

I have noticed this behavour with templates.

While we are waiting for a fix, I believe the correct css is regenerated when you click on Elementor > Tools > Regenerate CSS.

[nicolasprigent]

@parasshah195 @nicholaszein
Sorry to go back on this topic, but I also have issues with templates at breakpoints for mobile devices. The only css that is taken into consideration in templates are the desktop ones. As @hein-obox mentionned, clicking on Elementor > Tools > Regenerate CSS does the job, but as soon as the template is updated and saved, it's broken again and I do need to regenerate the CSS. It's kind of annoying and it gave me some headakes to be honest. Do you have an idea of what's causing this problem and if a fix is on tracks ?