# Studio Editor: Managing Breakpoints Source: https://support.wix.com/en/article/studio-editor-managing-breakpoints (updated 2026-10-05) Related: Wix developer documentation, https://dev.wix.com/docs/llms.txt; Help Center index, https://support.wix.com/en/llms.txt The Studio Editor allows you to create fully-responsive sites that adapt to different breakpoints. Breakpoints are the points at which the design is adjusted - so visitors always see the best possible version of your client's site, from any device. Define the relevant breakpoints for every page and global section, and customize the design accordingly. > **Want to know more?** Learn about [designing across breakpoints](https://support.wix.com/en/article/studio-editor-designing-across-breakpoints). --- ## Viewing site breakpoints By default, the Studio Editor comes with the most common breakpoints based on user traffic (mobile, tablet and desktop). Our featured breakpoints cover a wide range of screen sizes - but you can define and customize them as needed. You can see 3 default breakpoints at the top of your editor. Click the breakpoints to enter the view and start customizing the page or global section. ![A cropped screenshot of the Studio Editor top bar. The breakpoint icons are highlighted.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/07/29/a7e7c330-894f-4759-9440-8ec222dd46c7/7059a968-1c41-4efb-9d0e-75621dec13ee.jpg) You can also move between breakpoints by dragging the handles on the left and right sides of the canvas: ![A cropped screenshot of the Editor canvas. The handles to resize the canvas are highlighted and magnified.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/07/29/ac1fa0e3-a77e-4e69-b804-10bf1d6cbc60/db16f246-7105-426d-b752-0690ee5813f1.jpg) > **Tip:** Quickly navigate to the max value of a specific breakpoint by double-clicking the handles. --- ## Adding a new breakpoint You may want to design a page for a specific size that isn't included in the default breakpoints. You can add a breakpoint with a custom size from the panel. ### To add a new breakpoint: 1. Select the page or global section you're working on. 2. Click the **Customize Breakpoints** ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXc26pU2jN4T3rwaMZR6JXdcRND0YOiY61VlF_ExyGLmzBWoQBo5qeafQzY3Od2df7P5PnQdJDvHgPijZ3DTD_tlM-gQ3k4ZsZ-5cVLgIA1JqhjFD3ilCSfchnMdlc5nAf_o_P4WnnfS-GdAxS33x-EVr10?key=k_2EM6zsnpqJcxQF7aCXIg) icon next to the breakpoints on the top bar of the editor. 3. Click **Add Breakpoint**. 4. Enter the pixels for your breakpoint. 5. Click **Done**. > **Note:** You can define up to 6 different breakpoints for each page / master section on your site. ![A cropped screenshot of the customize breakpoints panel opened in the top bar. The cursor is clicking Add Breakpoint.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/07/29/7519789a-ab6e-4e00-b4e3-b78b8c1b6b0b/19f7b8a3-0f08-4637-bac4-e05b5373b4ee.jpg) --- ## Editing existing breakpoints Change the size of the existing breakpoints in your editor to tailor your client's site needs. ### To edit a breakpoint: 1. Select the page or global section you're working on. 2. Click the **Customize Breakpoints** ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXc26pU2jN4T3rwaMZR6JXdcRND0YOiY61VlF_ExyGLmzBWoQBo5qeafQzY3Od2df7P5PnQdJDvHgPijZ3DTD_tlM-gQ3k4ZsZ-5cVLgIA1JqhjFD3ilCSfchnMdlc5nAf_o_P4WnnfS-GdAxS33x-EVr10?key=k_2EM6zsnpqJcxQF7aCXIg) icon next to the breakpoints on the top bar of the editor. 3. Hover over the relevant breakpoint and click the **Edit** icon ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdCpPdRB0HF5c9SMuonY-ivPGe_fX7Y4MP2Q41LqjUkF7fcOQW7GHm8TTq5DGj-SOAePBhzPl5r1lLVhATqbK6LzLeHiHAW3U6s1D7u-TVHiMXhqSsYZ0r6jP1m26-fqoMTgDdnAH07IkMQ8__TDkvbvVE1?key=k_2EM6zsnpqJcxQF7aCXIg). 4. Enter the pixels of your breakpoint. 5. Click **Done**. ![A cropped screenshot of the customize breakpoints panel opened in the top bar. The cursor is clicking the Edit icon.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/07/29/83e9cc64-fcae-4ae7-ab14-e844cf5fd856/31ac9704-3443-47ab-9a52-d89b24c8be87.jpg) --- ## Deleting a breakpoint Your client may not want their site designed for a certain screen size. If that's the case, you can delete the relevant breakpoint as needed. This also deletes any layout and design properties for the breakpoint. > **Important:** When removing a breakpoint, it changes the px range of the other breakpoints to complete the gap. This might make your design less responsive to different viewports. ### To delete a breakpoint: 1. Select the page or global section you're working on. 2. Click the **Customize Breakpoints** ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXc26pU2jN4T3rwaMZR6JXdcRND0YOiY61VlF_ExyGLmzBWoQBo5qeafQzY3Od2df7P5PnQdJDvHgPijZ3DTD_tlM-gQ3k4ZsZ-5cVLgIA1JqhjFD3ilCSfchnMdlc5nAf_o_P4WnnfS-GdAxS33x-EVr10?key=k_2EM6zsnpqJcxQF7aCXIg) icon next to the breakpoints on the top bar of the editor. 3. Hover over the relevant breakpoint. 4. Click the **Delete** icon ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdlDn8Pe_vLwZrMVEk7myHaluEwKARwohX64NUkgR_lcXQDGuyjcUTiOs1mgt4L_WCXi-H1M7qEwG2MPkC9d71rC2VY3lssjQLg-CaX4pRYSm-s356_UzlNI2XFsN2FATWdgVIq8JClZEDcwULKsB0uRt6q?key=k_2EM6zsnpqJcxQF7aCXIg). > **Note:** The site must have at least one breakpoint. For this reason, it is not possible to remove the top breakpoint from the list. ![A cropped screenshot of the customize breakpoints panel opened in the top bar. The cursor is clicking the Delete icon.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2024/07/29/610e3daa-4b5c-4f26-9a41-bde65a23b604/6878ec0a-74e5-4292-a9cf-f3978bd29579.jpg)