I had a look at the code. I found the problem, and a solution.
The problem is that the –content-width variable isn’t set properly, if you enter any custom value at all in the field “Width”.
If you enter nothing, here is it’s value:
–content-width: Min(100%,var(–container-max-width,1140px));
If you enter something (say, 1300px), it is instead:
–content-width: 1300px;
They remove that min() check.
And this messes with the –padding values. Here is the padding CSS:
padding: var(–padding-top) calc((100% – var(–content-width)) / 2 + var(–padding-right)) var(–padding-bottom) calc((100% – var(–content-width)) / 2 + var(–padding-left));
So you see that “calc((100% – var(–content-width)) / 2 + var(–padding-right))”, that’s for the padding-right value. The other one similar is for the padding left value.
Well these maths don’t work anymore if 100% is 1160px, let’s say. (if viewport width is 1160px)
With the buggy CSS it becomes 1160px – 1300px / 2 + whatever padding you set.
So even if you set 70px padding left and right, that’s still 0.
That’s the problem.
The solution is simple : use their default min() value for –content-width variable, however with your own custom width.
IE add this under custom CSS. Change 1300px to what you want. And importantly, keep the “Width” field empty:
selector{
–content-width: Min(100%,var(–container-max-width,1300px));
}
You can ignore the warning that says there is a bug in the CSS. Elementor is using an outdated linter.
This will make the padding calculation actually work. On viewports narrower than the width, it will go like this :
padding-right: 100% – 100% + padding value you set;
so the output will be simply:
padding-right: value you set;