Mobile Editing

Transforming a website to be mobile responsive has never been easier, with Elementor's Mobile Editing Feature.

Mobile Font Size

Change the font size per device by going to widget setting > Style > Typography > Size, clicking on the desktop icon, clicking on the mobile icon and setting the size for mobile.

Mobile Line-height and Letter-Spacing

In the same way, you can set different line-height or letter spacing values.

Padding and Margin

This feature is used to make a different padding or margin size per device. 

To set different padding settings go to the Advanced tab on the widget, column or section level. Now click on the desktop icon near the padding size. Click on the mobile icon next and set the value for mobile. The same action can be done for mobile margin size.

Mobile Alignments 

This feature lets you set a different alignment per device. 

To use it, go to widget setting > Content > Alignment, choose the desktop / tablet / mobile icon and set the alignment per device.

Columns Ordering

This feature reverses the ordering of columns, so when you go to mobile the last column will appear on top.

If, for example, you have a 2 column section side by side, when you go to mobile the left column will appear on top. When you switch the Columns Ordering option on, it will set the right column on top, because of the reverse order.

To use Columns Ordering go to Section setting > Advanced > Responsive > Reverse Columns and set it to 'Yes'.

Column Width Control

This feature lets you override the default 100% width for mobile, so you can have more than one column in one section. This is useful, for example, if you want an image to be positioned next to a heading in the same section. 

To use it, go to column setting > Advanced > Responsive > Mobile Width > Custom, and set the percentage accordingly. 

If you have two columns, for example, and both set to 50%, they will appear in one horizontal section. 

Section, Column and Widget Editing

You can switch to mobile or tablet views and still edit the section, column or widget settings.

Pixel, EM, REM and % sizing

In Elementor, you can set the sizing scale of elements as either Pixel based, EM, REM or percentage based. For people not familiar with the differences between sizing scale, while pixel is a more set scale, EM, REM and percentage are relative to a size that is set elsewhere. If you want to learn more about this check out this article on Zellwk, or this one on Kyleschaeffer

Device Preview

Switch between Desktop, Mobile or Tablet views by clicking on the corresponding icons on the bottom of the panel.