How to turn screen sizes on or off and change their widths

In TeleportHQ, you manage screen sizes in Breakpoints Settings: in the top bar above the canvas, click Settings (the three dots after the breakpoint icons), tick or untick a breakpoint, change its width, and click Apply. Turning a breakpoint off deletes every style saved at that breakpoint across the whole project, and it can't be undone.

Before you start#

• You need a role that can edit breakpoints. If you don't see the Settings button, your role doesn't have that permission. The built-in Editor role can't open Breakpoints Settings. Ask a workspace owner or admin. See What can each role do? (Admin, Designer, Editor, Viewer).
• TeleportHQ has six fixed breakpoint slots: Mobile (479px), Mobile Landscape (767px), Tablet (991px), Laptop (1200px, the default), Desktop (1600px, off) and Wide (1920px, off). You can turn them on or off and change their widths. You can't add a seventh breakpoint.
• Changes you apply in Breakpoints Settings aren't part of the undo history. If you plan to turn a breakpoint off, save a backup first so you have a way back. See How to back up and restore your project.

Open Breakpoints Settings#

1. In the top bar above the canvas, find the breakpoint icons.
2. Click the three-dot button after them (tooltip Settings). The Breakpoints Settings window opens with one row per breakpoint. The default breakpoint's row shows - Default.

1. The breakpoint rows: the tick box turns a breakpoint on or off, and the box on the right holds its width in pixels.
2. Show breakpoint guide lines shows or hides the vertical lines on the canvas.
3. Apply saves your changes. Cancel closes the window without changing anything.

Turn on a larger screen size (Desktop or Wide)#

1. In Breakpoints Settings, tick Desktop. Its width box shows 1600.
2. Click Apply.

Desktop now becomes the default breakpoint, because the default is always the largest breakpoint that is on. Your existing design stays the base for every screen size. Laptop becomes a smaller breakpoint: changes you make with the 1200px icon selected now apply to screens 1200px wide and smaller. To keep editing your base design, click the 1600px icon first.

Change a breakpoint's width#

For example, to make your tablet layout start at 1024px:

1. In Breakpoints Settings, click the Tablet width box.
2. Type 1024.
3. Click Apply.

Styles saved at the old width move to the new width. Each width must stay between 320px and 3200px, and at least 5px away from the breakpoints next to it.

Turn a breakpoint off#

1. In Breakpoints Settings, untick the breakpoint. For example, Tablet.
2. Click Apply. A confirmation appears: Delete breakpoint 'Tablet'? "Removing this breakpoint will also remove all of its content." "This step cannot be undone. Do you want to proceed?"
3. Click Delete to confirm, or Cancel to keep it.

If you turn off the default breakpoint, the message reads "Removing this breakpoint will remove all the content of the next largest breakpoint!" The largest breakpoint that is still on becomes the new default, and the styles saved for it are deleted, so your base design applies there.

Show or hide the guide lines#

The vertical lines on the canvas mark each breakpoint. To hide them, turn off Show breakpoint guide lines in Breakpoints Settings and click Apply. The same switch is Show media query guide lines: click the Project settings cog at the bottom of the left sidebar, then Editor → Preferences → View, under Canvas.

Check that it worked#

The icons in the top bar above the canvas now match the breakpoints you left on. Point at an icon to check its width, for example 1024px.

Troubleshooting#

"Tablet must be bigger than Mobile Landscape by at least 5px" Each breakpoint must be at least 5px wider than the next smaller one. Type a larger width. The message "… must be smaller than … by at least 5px" means the width is too close to the next larger breakpoint.

"Value is not a number!" The width box accepts numbers only. Type 1024, not 1024px.

The Apply button is greyed out Apply stays disabled until you change something, and while any row shows an error. Fix the error first.

I can't untick the last breakpoint A TeleportHQ project always needs at least one breakpoint turned on.

I turned a breakpoint off and my tablet styles are gone The styles were deleted when you confirmed. If you saved a backup before the change, restore it from Backups. Otherwise, switch to the next smaller breakpoint and restyle the elements.

Good to know#

• Styles saved at a width that no longer matches a breakpoint still apply. They show in the Advanced tab as Screen ≤ Npx with a warning, and you can move them to an existing breakpoint.
• Breakpoint settings apply to the whole project, not to one page.