Front-end style and px unit

[widoz]

Hi,

First of all, thank you for this amazing plugin it is incredible fast.

Second of all, I notice that in front-end.css the media queries are in px, there is a particular reason for that? Using the rem unit will make the page and elements more responsive and accessibility.

The same question is for paddings and font sizes.

[arielk]

Thanks for the compliments :)

I know that Bootstrap 4 built with EM unit for breakpoints: http://v4-alpha.getbootstrap.com/layout/overview/

I'm not sure about REM unit for media queries

[widoz]

If you use the Rem for typography and Em units for media queries and box model you'll increase the accessibility.

Think about an user that increase the base font size on browser 'cause he is partially sighted or have problems to read the content and need to have a bigger font size.

In my experience when font base change the layout should follow the new sizes, so you can still have a proportional layout and nothing break.

I'm so sorry for my english. So, here some more info about the typography unit and accessibility:

• https://www.w3.org/WAI/tutorials/page-structure/styling/
• http://webaim.org/discussion/mail_thread?thread=6474

Regarding the media queries you can try it by your self I can make an example if you can give me some time.

[arielk]

We already support REM unit for font size, you can see the screenshot:

I'll glad to see your example for breakpoints.

Thanks for your feedback

[widoz]

Thanks for your info, but I meant in front-end.css

[arielk]

You probably meant about the media queries size, right? Because we don't write any font-size or line-height with pixels in the frontend.css

[widoz]

The media queries, font-sizes, paddings, margin etc... Under the elementor/assets/css/frontend.css for example:

.elementor-widget-heading .elementor-heading-title.elementor-size-small { font-size: 15px; }
/* And for medium, large etc... */

.elementor-button { /*... */ padding: 12px 24px; }

[arielk]

You right. let me check it again and we'll change it to another unit

[peepshow]

@arielk Just following up on this issue.

Is there any reason why all font sizes aren't defaulted to EM or REM sizing. Pixel sizing is not exactly the best way to set font-size now days.

If the default was set to EMs then developers could set the base size in their themes. This would allow a cleaner way to configure the defaults or add fluid font sizing.

It would also be better if the media queries were done with EMs, for the similar reason.

I had written CSS to customise some of the default grid sizing in Elementor, but recently you changed the specificity of some classes and my sizing has be overridden by Elementor again. These sorts of changes make it quite difficult to maintain.

I realise I could control this with custom classes but that means having to manually add classes to every single Elementor section.

[widoz]

@peepshow May I suggest to use REM as default font unit instead of EM?

EM can take un-arbitrary huge or small size depending on the container of the element where the REM is still defined at root level.

Made a pen http://codepen.io/wido/pen/Npxojp

[peepshow]

What @widoz said.

A way to solve the section widths could be to add EM, REM, VW or % as the measurement value for Content Width. Similar to how font sizing or Minimum Height works.

Another sizing that would great to see in EM, REM, VW, VH or % is the Columns Gap. Again with Elementor's CSS defaulting to px based padding, it is very tricky to create truly fluid design.

[black-eye]

+1, following this

[khelx67]

+1

[sherlanova]

+1 Need to learn about the REM sizing asap.

[arielk]

Long time, but it's time to clean some old issues.

I merge this issue with another issue https://github.com/elementor/elementor/issues/2810 in the same subject so we could deal with it more efficiently.

Thanks for your feedback!