How To Adjust Settings For Mobile, Tablet, and Desktop
Many editable features have a Mobile, Tablet, and Desktop settings. Most common uses include: Text size, Margin and Padding of elements etc.
- Look for the Viewport Icon next to the individual element you wish to control.
- Click the device icon you need, to edit its settings.
Even background images can be controlled independently on each device.
Responsive Background Images
Background images in Elementor are automatically device-responsive, but you also have control over more options for each device.
Controlling Responsive Background Images and Borders
- Background Image: You can choose a different background image for each device if needed, whether it is a size-appropriate version of the same image, or a completely different image altogether.
- Background Image Display Options: You can select a different image position, attachment, repeat, and size for each device. In this way, you have more control over which area of the image is displayed on different device sizes.
Visibility
You can choose to Show / Hide a Section according to the device.
- Go to Section Setting > Advanced
- Under Responsive > Visibility
- Set your visibility preferences, choosing from Hide on Desktop, Hide on Tablet, or Hide on Mobile.
Tip: While the Widgets Panel is open, Responsive Preview modes will continue to show sections you've hidden, making it appear as though they won't be hidden on the live site. However, all you need to do is click the arrow to hide the Widgets Panel, and the responsive preview will immediately reflect the fact that your section is hidden. Watch how showing and hiding the Widgets Panel affects the Responsive Preview of a hidden section on Mobile.
Change Mobile & Tablet Breakpoints
You can set the mobile and tablet breakpoint values.
- Go to Elementor > Settings > Style Tab, and set the breakpoint value for mobile and tablet
- Save your changes
- Go to Elementor > Tools > General Tab > Regenerate CSS, click Regenerate Files
Columns Ordering
This feature reverses the ordering of columns.
To use Columns Ordering go to Section Setting > Advanced > Responsive > Reverse Columns and set it to Yes.
Device Preview
Switch between Desktop, Mobile or Tablet views by clicking on the corresponding icons on the bottom of the panel.