{"id":157,"date":"2022-10-21T12:00:00","date_gmt":"2022-10-21T09:00:00","guid":{"rendered":"https:\/\/elementor.com\/help\/?p=157"},"modified":"2026-02-01T11:52:47","modified_gmt":"2026-02-01T09:52:47","slug":"mobile-editing","status":"publish","type":"post","link":"https:\/\/elementor.com\/help\/mobile-editing\/","title":{"rendered":"Responsive editing for mobile and tablets"},"content":{"rendered":"\n

Design your site for any device<\/h2>\n\n\n\n

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. <\/p>\n\n\n\n

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 \u201cbreakpoint.\u201d<\/p>\n\n\n\n

Since one design won\u2019t 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.<\/p>\n\n\n\n

\"\"
A home page as seen on a desktop.<\/figcaption><\/figure>\n\n\n\n
\"\"
The same page as viewed on a mobile.<\/figcaption><\/figure>\n\n\n\n

To learn more about the basics of responsive design, see Responsive design<\/a>. <\/p>\n\n\n\n

[callout type=”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\u2019s responsive design controls.[\/callout]  <\/p>\n\n\n\n

View your site on different devices<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

To view how your site will look on different screen widths<\/strong>:<\/p>\n\n\n\n

    \n
  1. Open the page in the Elementor Editor.
    \"\"<\/li>\n\n\n\n
  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. 
    \"\"
    The above shows a site in tablet view.
    \"\"
    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.   <\/li>\n<\/ol>\n\n\n\n

    Edit for different devices<\/h2>\n\n\n\n

    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 – , , . <\/p>\n\n\n\n

    To edit a setting for a specific device:<\/strong><\/p>\n\n\n\n