Responsive editing

Responsive editing entails editing an element so that the design is suitable for different screen sizes. In Elementor Editor V4 Responsive editing is clear and straightforward and all element options can be customized for different screen sizes.

To edit an element for device: 

1. Select the element you want to edit. 
   
   In this example, we’re viewing the page as it would look on a desktop.
2. In the top bar, click the device you want to edit for.
   
   Note

   You can edit any of the options under the Style tab while in responsive mode.
   
   In this case we’ll switch to the setting for mobiles.
3. Edit the options.
   In this case, we’ll change the background image and decrease the text font size.
   
   
   You see the page as it appears on mobile devices.
   
   Note

   Responsive settings are inherited by default from larger screens to smaller screens. For example, if you use a 24 point font for a heading on desktop computers, tablets will also use a 24 point font unless you use responsive editing to change the size for tablets. And if you change it to a 12 point font for tablets, mobiles will use this 12 point font unless you change it. The exception is widescreens, which do not affect any other settings.

Hide an element on mobile devices

In many designs, an element that works well for one screen size may not be a good fit for another. For instance, a large image may look great on desktops and tablets but break the design on mobiles. In these cases, you can use the Style tab to hide an element on selected screen sizes.

To hide an element on selected screen size:

1. Add an element to a page.
   
   For this example, we’ll use an image.
   
2. Click the mobile icon on the top bar.
   
3. Select the Image element. The options appear in the left-hand panel.
   
4. Click the Style tab.
   
5. Open the Layout section.
   
6. Select None.
   
   The image no longer shows up on mobile screen sizes.
   
   Tip

   You can still access the Image element using the Navigator. Fore details, see Use page structure to navigate your page.