help center

On this page

Responsive editing for mobile and tablets

Last Update: December 12, 2023

Design your site for any device

When you design a site, you can never be sure if visitors will be accessing it from a PC, a tablet or a mobile. Best practice is to design your site to be compatible with different devices. At minimum your site should work with PCs, tablets and mobiles. 

Web browsers define these devices by their visible screen width or viewport. For instance, by default the Elementor Editor defines devices with a viewport over 1024px as PCs, devices with a width between 1024px and 767px as tablets and devices with a width under 767px as mobiles. The point at which the view shifts from device to device (for example, 767px) is called a “breakpoint.”

Since one design won’t usually work for all devices, the Elementor Editor allows you to customize your design for different devices. For instance, your menu may appear as horizontal text when seen on a PC and a dropdown menu when viewed on a tablet or mobile. Breakpoints define when these switches will take place.

Site home page as seen on a desktop Responsive editing for mobile and tablets 1
A home page as seen on a desktop.
The same page as viewed on a mobile Responsive editing for mobile and tablets 3
The same page as viewed on a mobile.

To learn more about the basics of responsive design, see Responsive design

info
Note
By default, Elementor Editor creates three versions of your site: one for PCs, one for tablets, and one for mobiles. However, many creators would like to fine tune these designs using the Editor’s responsive design controls.

View your site on different devices

In order to create a responsive site, you need to see how your site will look on various screen widths. Elementor Editor provides a quick way to test your site on multiple screen sizes.

To view how your site will look on different screen widths:

  1. Open the page in the Elementor Editor.
    image 52 Responsive editing for mobile and tablets 5
  2. In the top toolbar, click the icon representing a screen width you would like to view. By default, there are three icons: one representing PC view, one representing table view, and one representing mobile view. If you add additional screen widths, they will also appear here. For more information about adding more screen widths, see Add and customize breakpoints. 
    image 53 Responsive editing for mobile and tablets 7
    The above shows a site in tablet view.
    image 54 Responsive editing for mobile and tablets 9
    If you are not in PC view, there are handles to the left, right and bottom of the screen. Click and drag these handles to change the screen size.   

Edit for different devices

Elementor Editor allows you to customize many element settings for different devices. Settings that can be customized for different devices are marked with a device icon – uQEznv1 G7nhJpdZ8bzIZMhc8NLcuFpyXoowju2x64zSBK3DLVNK7KHhXtvgtTdsSzlHq Responsive editing for mobile and tablets 11, bOjzhARW4Js QQOOMGB2ZCJcH6Jogpc0jpaoRPUfuMPkrfhdgUBqhbuXFmkFBhGsXz1kNwJuGJiW1Q qXssuDXlE2PZt QA3 0clvAAXhzpBRxJjTOnAi0jrUhwyjyVl5bm Q1W mt49PAqeCqR5lQ Responsive editing for mobile and tablets 13, jirgw jfyYVbhK5XD4haimP1WXlcL HdpnCClmeUL9aqPgY7ZpZ6ezrbH1uyrTK3CiKPiqdGr8ZXMmnAV6Oqilg9xIZkuqvO0cZhdTlLL5W6w6hk 4cIZbLAX06dlbKAODVihFZLdh1YjhasW3GWwQ Responsive editing for mobile and tablets 15

To edit a setting for a specific device:

  • You can switch between device settings by clicking the icon next to the setting and selecting a device from the dropdown.

If you’re editing your site for a particular device, we recommend that you select that device from the top bar first. See the example below.

Example of editing an element for a specific device   

In this example, we’ll change the typography of a heading so that it appears differently on PCs and mobiles.

Before you start, open or create a page that contains a Heading widget.
image 55 Responsive editing for mobile and tablets 17

  1. From the top bar, click the mobile icon.  
  2. Select the Heading widget.
    image 56 Responsive editing for mobile and tablets 19
  3. In the panel, click the Style tab. 
    image 57 Responsive editing for mobile and tablets 21
  4. In the Typography setting, click the pencil icon m6xDbrRIBbdshPVlbp7xOwB38PDThefuemCQEnVjy4w4u0NkArNP98 Responsive editing for mobile and tablets 23.
    image 58 Responsive editing for mobile and tablets 25
    The icon by the Size setting shows that we are changing the size of the text for mobile.
    image 59 Responsive editing for mobile and tablets 27
  5. In the panel, use the Size slider to change the font size so the heading fits on one line.

You’ve changed the way this element will appear on mobiles.

To see how this same page will look on PCs:
image 60 Responsive editing for mobile and tablets 29

  1. In the panel, under Typography, go back to the Size setting.
    image 61 Responsive editing for mobile and tablets 31
  2. Click the mobile icon 94LjXzmYvT4SdybSC Responsive editing for mobile and tablets 33, and select the PC icon Responsive editing for mobile and tablets 35 from the dropdown list. 
    image 62 Responsive editing for mobile and tablets 37

The PC version of the page appears.

info
Note
Responsive editing is top-down. This means that when you make a change to a wider device, it will affect narrower devices. In the above example, if we had changed the heading for tablets, that same change would have automatically been applied to mobiles. Because we only changed the heading for mobile devices, it will not affect how the heading appears on PCs and tablets.

Add and customize breakpoints

By default, the Elementor Editor creates pages for three types of devices – PCs, portrait tablets and portrait mobiles, with breakpoints of 1024px for tablets and 767px for mobiles.  Some creators want the option of creating their own breakpoints or adding additional devices for greater design flexibility. Such tablets can include widescreen PCs, landscape tablets and mobiles and more. 

Using the Elementor Editor site settings, you can edit the breakpoints of the default devices and add additional devices with their breakpoints.

Access breakpoints

Breakpoints are accessed through the Site Settings.
image 63 Responsive editing for mobile and tablets 39

  1. On the toolbar, click the SV67Kp1dSaEWY9zFAdf0GbdbgZES8lPpcAgGDu84d6MIf3SxNn54KiDVUO 0l1ko3BqdTsB WmIcycTARhaG7ofwsQPYmPQV9mE1ecoqTB Responsive editing for mobile and tablets 41 icon to select Site Settings.
    image 64 Responsive editing for mobile and tablets 43
  2. From the menu, under Settings, select Layout.
    image 65 Responsive editing for mobile and tablets 45
  3. In the panel, scroll down to Breakpoints and expand it.
    image 66 Responsive editing for mobile and tablets 47
    You can now edit the breakpoints.

Add a breakpoint

For creators who want to accommodate a greater range of devices and uses, you can add additional breakpoints.

  1. Access the breakpoint menu as detailed above.
    image 67 Responsive editing for mobile and tablets 49
  2. In the Active Breakpoints section, click the plus icon R3J245BUe PQNN9TY7KndhBWC5AMnDQZSpHOWCfAwWVtOU4z6pf1Zqj03GwldazCqGMsNajXrQzysVr0Dg6LxFYo DRYFpMETGaZsl8uRxf8uC2YgDtyMksn Responsive editing for mobile and tablets 51.
    image 68 Responsive editing for mobile and tablets 53
  3. From the dropdown menu, select one of the six breakpoint options, for example, Table Portrait.  You can edit the default setting of each breakpoint.

Customize a breakpoint

Elementor allows you to customize screen widths to accommodate new devices. 

  1. Access the breakpoint menu as detailed above.
    image 69 Responsive editing for mobile and tablets 55
  2. In the panel, in the Breakpoint (px) text box, enter a new breakpoint value in pixels.
    image 70 Responsive editing for mobile and tablets 57
    The new number you entered will define the screen width for that breakpoint.
    image 71 Responsive editing for mobile and tablets 59
  3. Click Save Changes.

Delete a breakpoint 

You may want to delete breakpoints to simplify your design and design process.

info
Note
You cannot delete the two default breakpoints.
  1. Access the breakpoint menu as detailed above. 
    image 72 Responsive editing for mobile and tablets 61
  2. Click the X icon next to the breakpoint name.
    image 73 Responsive editing for mobile and tablets 63
  3. Click Save Changes.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article