How to make your site look good on phones and tablets

In TeleportHQ, you design your site on a large screen first. To fix how it looks on a tablet or phone, click a screen-size icon in the top bar above the canvas (for example, the phone icon for 479px) and change styles while that size is active. Your changes apply to that screen size and every smaller one. Larger screens stay as they were.

What breakpoints are#

A breakpoint in TeleportHQ is a screen width where your site is allowed to look different. Every new TeleportHQ project has six breakpoint slots:

The default breakpoint holds your base design. It is always the largest breakpoint that is turned on. In a new project that's Laptop (1200px), which is also the width the canvas opens at.

You can turn Desktop and Wide on, turn others off, and change the widths. You can't add a seventh breakpoint with a custom name. See How to turn screen sizes on or off and change their widths.

How styles flow from large to small screens#

TeleportHQ responsive design works from the largest screen down:

• A style you set on the default breakpoint applies to every screen size.
• A style you set on Tablet applies to tablets and every smaller screen (Mobile Landscape and Mobile), but not to laptops.
• A style you set on Mobile applies only to screens 479px wide and narrower.

Changes never flow upward. If you make a heading smaller on Mobile, it stays the same size on Laptop.

For example, a bakery's homepage has three product cards side by side. On Tablet, you switch the cards' row to a column. On Mobile Landscape and Mobile, the cards stack too, because they inherit the Tablet change. On Laptop, they stay side by side.

CSS classes follow the same rule. A class can hold its own styles for each smaller screen size, in the Media Query Properties of the Edit class panel. Sites built with the TeleportHQ AI often keep their phone and tablet styles there, so changing a class's mobile style changes every element that uses it. See How to edit a CSS class.

How to switch the canvas to a screen size#

To design for a smaller screen in the TeleportHQ editor, use the top bar above the canvas:

1. The screen-size icons switch the canvas to that breakpoint. Point at an icon to see its width, for example 767px. The icon of the active breakpoint is highlighted.
2. Settings (the three dots after the icons) opens Breakpoints Settings. See How to turn screen sizes on or off and change their widths.

You can also:

• Drag the handles at the sides of the canvas to any width between 320 and 3200 pixels. The active breakpoint changes as you pass each width.
• Click one of the vertical guide lines on the canvas. The line of the active breakpoint shows its name and width, for example Tablet: 991px, and other lines show theirs when you point at them.

At the top right of the page on the canvas, TeleportHQ shows the active breakpoint's icon and the canvas width, for example 479px.

The canvas keeps its width the next time you open the project, as long as Keep viewport size is on (it is on by default). To check it, click the Project settings cog at the bottom of the left sidebar, then Editor → Preferences → View, under Canvas. See How to zoom and move around the canvas.

How to tell which styles belong to which screen size#

When you select an element in TeleportHQ, the right panel (Inspector) shows where each value comes from:

• A value in normal text was set on this element at the screen size you are on.
• A value in grey was inherited, for example from a larger breakpoint or a CSS class. Point at it to see where it comes from, for example Inherited from inline style with the element's name and @1200px.
• A section title turns blue when that section has values saved at the current, non-default breakpoint.

To learn how to change and reset those values, see How to change styles for mobile only.

Tips for layouts that adapt well#

• Use relative sizes. A width of 100% fits any screen. A fixed width like 1100px sticks out past the edge of a phone. See How to set an element's width and height.
• Stack rows on small screens. Switch a row of items to a column on Tablet or Mobile Landscape. See How to align and space items in a row or column.
• Hide what doesn't fit. A large decorative image can be hidden on phones. See How to hide an element on mobile or desktop.
• Give your menu a mobile version. A navigation bar needs a burger menu on phones. See How to create a navigation bar with a mobile menu.
• Check the real thing. Open Preview and use the Viewport buttons (Desktop view, Tablet view, Mobile view), or open the site on your phone after publishing. See How to preview your site before publishing.

Troubleshooting#

A red info icon appears at the top right of the page TeleportHQ shows it next to the canvas width when something on the page is wider than the canvas: "The content of your page overflows and may cause visibility problems on some devices." Find the element with a fixed width (for example 1100px) and change it to a percentage such as 100%, at the breakpoint where it overflows.

My mobile change also changed the desktop layout You were probably on the default breakpoint when you made the change. Check which icon is highlighted in the top bar before you edit. Undo the change, click the Mobile icon, and make it again.

I changed one card on mobile, but the other cards didn't change Your change went onto the selected element only. If the cards share a CSS class, change the class's Media Query Properties instead, so every card follows. See How to edit a CSS class.

My hover effect looks different than I expect on phones Interaction states such as hover apply at every screen size in TeleportHQ. You can't give an element a different hover style on mobile. See How to add hover and click effects (interaction states).

Good to know#

• Turning a breakpoint off deletes every style saved at that breakpoint, across the whole project, and can't be undone. Read How to turn screen sizes on or off and change their widths before you do it.
• If you turn on Desktop (1600px), it becomes the new default. Your existing design stays the base for every screen size, and changes you make later with Laptop selected apply to screens 1200px wide and narrower.
• Responsive design isn't limited by plan. Changing breakpoint settings needs a role that can edit breakpoints; see What can each role do? (Admin, Designer, Editor, Viewer).