How to change styles for mobile only

To change a style for phones only in TeleportHQ, click the Mobile breakpoint icon (479px) in the top bar above the canvas, select the element, and change the style in the right panel. The change applies to screens 479px wide and smaller. Your laptop and tablet design stays the same.

Before you start#

• Know which breakpoint you need. A change on Tablet (991px) also applies to Mobile Landscape and Mobile. A change on Mobile (479px) applies only to the smallest screens. See How to make your site look good on phones and tablets.
• If the element's look comes from a CSS class that other elements share, decide where the change belongs. A change in the right panel goes onto the selected element only. To change every element with the class, edit the class instead (see Good to know).

Steps#

1. In the top bar above the canvas, click the breakpoint icon for the screen size you want. For example, click the icon with the tooltip 479px for Mobile. The canvas shrinks to that width, and the icon stays highlighted.

2. On the canvas, click the element you want to change. For example, your homepage heading.
3. In the right panel, make sure the Visual tab is open.
4. Change the value you need. For example, in Text Style, set Font Size to 32px. If the heading has a text style linked, that section hides the font fields: open the Advanced tab instead and, under Screen ≤ 479px, add font-size with the value 32px.
5. Check the section title (on the Advanced tab, the Screen ≤ 479px title). It turns blue, which means this section now has values saved for the current breakpoint.

You can also drag margins, padding and element edges on the canvas while a smaller breakpoint is active. Those changes are saved for that breakpoint too.

Check that it worked#

1. In the top bar, click the default breakpoint icon (1200px in a new project). The heading is back to its original size.
2. Click the 479px icon again. The heading is 32px.

To see it as a visitor would, open Preview and click Mobile view next to Viewport.

Remove a mobile-only change#

To undo a breakpoint change in TeleportHQ and go back to the inherited value:

1. Make sure the same breakpoint is active in the top bar.
2. Select the element.
3. In the right panel, click the blue section title (for example, Text Style).
4. Click Reset Values. All of that section's values for this breakpoint are removed.

You can also hold Alt and click the blue title to reset it straight away.

See and move breakpoint styles in the Advanced tab#

The Advanced tab in the TeleportHQ right panel lists the element's styles by screen size. Properties holds the base styles, and each smaller breakpoint has its own section, for example Screen ≤ 479px.

A section that holds styles has buttons at the right of its title to:

• Move all properties to larger breakpoint
• Move all properties to smaller breakpoint
• Remove all style properties for this breakpoint

See How to write CSS directly (Advanced tab).

Troubleshooting#

Clearing a field on mobile shows "0px" instead of the desktop value When a value comes from a larger breakpoint, the first time you clear the field TeleportHQ saves an explicit override such as 0px or transparent. Clear the field a second time to remove the override, or use Reset Values.

There is no Reset Values option on the section title Reset Values only works on a colored section title. It isn't available on the default breakpoint, because the default holds your base styles. On the default breakpoint, delete the value in the field instead.

The + or − button of a section is greyed out In Background, Border, Radius, Margin, Padding and Visibility, those buttons are disabled when a larger breakpoint already has values for the section. Edit the fields directly instead.

My hover style changed on every screen size Interaction states such as hover aren't tied to a breakpoint for element styles. While a state is active, your edits go to that state at every screen size, even if a smaller breakpoint icon is highlighted. See How to add hover and click effects (interaction states).

Good to know#

• CSS classes have their own per-breakpoint styles. To change every element that uses a class on mobile, open the class and use its Media Query Properties group, for example <= 479 px. See How to edit a CSS class.
• Formatting part of a text, for example making one word bold, also applies only to the breakpoint you're on. That's set by Media query updates in the rich text editor, which is on by default: click the Project settings cog at the bottom of the left sidebar, then Editor → Preferences → Editing, under Content.
• Styles saved at a width that is no longer a breakpoint show in the Advanced tab with a warning: "This breakpoint is not defined in your project. These styles still apply, but are at risk of being overwritten if you make changes to your breakpoint setup. Consider moving them to an existing breakpoint."