Responsive Design and Breakpoints

Overview

A StretchPages page should look great on a phone, a tablet, and a laptop. StretchPages gives you three device widths to design against — desktop, tablet, and mobile — and lets you override styles at each one. Overrides publish as clean CSS media queries, so the page adapts automatically to the visitor's screen.

The three breakpoints

StretchPages previews your page at three standard widths:

• Desktop — a wide layout (around 1280px).
• Tablet — a medium layout (around 768px).
• Mobile — a narrow layout (around 390px).

Styles you set on desktop are the base. When you switch to tablet or mobile and change something, you create an override that applies only at that width and narrower — the rest of your design is inherited from the base.

Switch between device widths

1. Open the page in the canvas editor.
2. Use the device switcher in the top toolbar to change the canvas between desktop, tablet, and mobile.
3. The canvas resizes to that width so you can see and edit exactly how the page looks there.

Add a per-breakpoint override

1. Switch the canvas to the breakpoint you want to adjust (for example, mobile).
2. Select the element you want to change.
3. Change a style — for example, reduce a headline's font size, stack a row, or hide an element.
4. That change is saved as an override for that breakpoint only. Your desktop design is untouched.

A recommended workflow

1. Design on desktop first. Get the full-width layout right.
2. Check tablet. Fix anything that feels cramped — usually spacing and column counts.
3. Polish mobile. This is where most fixes happen: shrink big headlines, stack multi-column rows into one column, and increase tap target spacing.
4. Preview the published page on a real phone to confirm.

Example: making a feature grid mobile-friendly

You have a three-column feature grid that looks great on desktop. You switch to mobile and select the grid. The three columns are too narrow to read, so you change the layout to a single column and reduce the section's padding. You also shrink the hero headline from 56px to 32px on mobile. Desktop still shows three columns and the large headline — only the mobile view changed.

Tips

• Base equals desktop. Set your "normal" styles on desktop, then override downward. This keeps overrides minimal.
• Stacking is the most common mobile fix. Multi-column rows almost always want to become one column on mobile.
• Watch font sizes. Large display headings usually need to come down a lot on mobile.
• Use spacing overrides rather than deleting elements — hide with a display change if you truly need to remove something on one breakpoint.
• Test the live page, not just the editor preview, on an actual device.

Troubleshooting

My mobile change also changed desktop. You likely edited while the canvas was on desktop. Overrides only apply to the breakpoint you're viewing — switch to mobile first, then make the change.

An element looks wrong only on tablet. Tablet inherits from desktop unless you override it. Switch to tablet and set the specific styles you want there.

Text overflows its container on mobile. Reduce font size, allow wrapping, or reduce horizontal padding for that breakpoint. Check that fixed widths aren't larger than the mobile screen.

Columns won't stack on mobile. Select the container (grid or flex), switch to mobile, and set it to a single column / column direction.

FAQ

Do I have to design every breakpoint? No. Design desktop well, then only override where tablet or mobile needs it. Everything you don't override is inherited.

Will my overrides work on the published page? Yes — breakpoint overrides publish as media queries, so visitors get the right layout for their screen automatically.