Responsive website design, in three fixed breakpoints

Siter.io gives you a desktop layout and two narrower ones, and you arrange each one yourself. Less than a full breakpoint system, and more control than an automatic one.

Start for free -> See the plans

The short answer.

Siter.io’s model is three fixed breakpoints — a desktop layout and two narrower ones — and you lay out each one by hand. There is no fluid system underneath it, no container queries, and no fourth breakpoint to add. That is a real constraint, and whether it is the right one depends entirely on what you are building.

Right for this

A designed marketing site, a landing page or a portfolio — a handful of pages whose layout you control and whose content does not change every week. Three layouts is enough to cover that properly, and arranging them yourself beats arguing with a system that guesses.
Wrong for this

Anything needing container queries, or a breakpoint at a width of your own choosing. Also anything a client will later pour arbitrary content into: three hand-positioned layouts do not absorb four extra paragraphs the way a templated system does.

How to lay it out.

Design once and adjust twice. Designing three sites is how a two-day job becomes a two-week one.
1. Finish the desktop layout first.
2. Switch to the next width down.
3. Reflow columns, reset the type.
4. Repeat at the narrowest width.
5. Publish, then check on hardware.
What actually changes at each width

Finish the desktop page first, then switch to the next width down and repair what the narrower canvas broke, then do the same at the narrowest one. What Siter.io calls each of the three views, and how wide each is drawn, is not documented anywhere we can cite, so read both off the canvas. The app is the authoritative source and this page is not.

Before a long pass, settle one question: make a small change at the desktop width, switch views, and see whether it carried. Siter.io does not document which properties inherit between breakpoints, and the answer decides whether you work top-down or treat each width as its own layout. Five minutes here saves an afternoon of redoing edits in the wrong order.

Then the usual list, roughly in the order it bites. Anything carrying a hard width wider than the narrowest canvas. Rows of two or three columns that need to become one. Display type set for a wide canvas. Padding that read as generous at desktop and eats a phone screen. And images exported at the size of a desktop column — whether Siter.io serves a smaller file to a narrow screen is not documented, so size the export for the box it actually sits in rather than assuming something downscales it for you.

Do not make hiding your main tool. Whether an element can be hidden at one width only is not documented, so check it in the app before planning a layout around it — and a narrow view built from fewer, larger elements reads better than a desktop view with half of it switched off.

The last step is not optional. A page can look finished in every view on the canvas and still be unusable in the hand, which is what the published URL on a real phone is for.

Which plans include it.

All of them, which makes this row the least interesting one on the page. The row that decides anything is publishing, and it is not this one.

Feature	Start (free)	Solo $7	Plus $12	Pro $24
Design for Mobile	Yes	Yes	Yes	Yes

Read off the “View all features and options” table on siter.io/pricing on 2026-09-03.

No - the free plan builds and previews privately; publishing needs a paid plan, so the three layouts you build on the free plan stay private previews and nothing reaches a public URL until you upgrade, from $7/mo billed yearly. The full table, publishing row included, lives on the pricing page.

Four things that break going narrow.

In roughly the order they turn up. None of them is difficult once you know to look for it.

Fixed widths break first
One element wider than the screen drags the whole page sideways, and a phone shows that as a horizontal scroll on every page. Look for the block that still reaches the right edge in the narrowest view. It is nearly always a single item, not the layout as a whole.
Type does not scale itself
A headline sized for a wide desktop canvas is a wall of letters at the narrowest width. Reset display sizes at each breakpoint and aim for roughly three to six words a line. Body copy usually survives the trip untouched, which is why the headline catches people out.
There is no hover on a phone
Anything that only appears on hover is invisible to half your visitors, and anything smaller than a thumb is hard to hit. Give links and buttons real height at the narrowest width rather than trusting the desktop hit area to carry over.
A narrow window is not a phone
Dragging the browser narrower gets you the layout and none of the truth. It has no thumbs, no phone browser chrome eating the viewport and no mobile connection. Open the published URL on an actual handset before you send the link anywhere.

Frequently asked.

How do I make a website mobile friendly?

Lay it out for narrow screens rather than hoping it reflows. In Siter.io that means finishing the desktop page, then working down through the two narrower views and arranging each one: collapsing multi-column rows, resetting display type, removing hard widths and giving links enough height to hit with a thumb. Then open the published page on an actual phone and use it.

Why does my page scroll sideways on a phone?

Almost always one element wider than the screen rather than a broken layout. A row that kept its desktop width, an image at its full exported size, a headline that will not break, or padding that pushes a block past the edge. Switch to the narrowest view and find what still touches the right edge; fixing that one item usually fixes the page.

How many breakpoints does a website need?

For a marketing site or a portfolio, three is normally enough: one narrow, one middle, one wide. Dense product interfaces need more, and modern layouts increasingly use container queries so a component responds to the space it sits in rather than to the window. Siter.io gives you the three and none of the rest, and that is the trade to weigh.

Does Siter.io have custom breakpoints?

No. Three fixed breakpoints, at widths the app sets rather than widths you pick, and there is no way to add a fourth. What the app calls each of the three views, and how wide each one is drawn, is not documented, so read those off the canvas rather than from a page like this. If your design depends on a breakpoint at a width you choose, this is the constraint that decides against Siter.io, and it is better known now than halfway through a build.

Do I need to design a mobile version in Figma first?

No, and it usually wastes a week. Yes, on every plan including free - one-way import, no re-sync. Send the desktop frame across and build the narrow layouts on the canvas, where you can see what actually breaks, instead of guessing at three widths in a file nothing has been published from. Note too that prototype animations and interactions do not import.

Can I hide an element on mobile only?

Siter.io does not document that, so check it in the app before you plan a layout around it. Either way, hiding is the weaker move. A narrow view built from fewer and larger elements reads better than a desktop view with half of it switched off, and it leaves you one design to maintain instead of two that quietly drift apart.

Will my site be fast on a phone?

That depends mostly on what you put on the page, and the usual culprit is images: a photo exported at the size of a wide desktop column, fetched over a mobile connection. Siter.io does not document whether it serves a smaller file to a narrow screen, so export at the size the image is really shown. Its pricing table also carries a page speed row, but no measurement or method behind it is published anywhere, so treat that row as unverified and test the published URL yourself.

Is designing for mobile included on the free plan?

The feature is on every plan, including the free one. Publishing is the row that is not. No - the free plan builds and previews privately; publishing needs a paid plan, so the three layouts you build stay in private previews until you upgrade, from $7/mo billed yearly. From there the site publishes to a siter.io subdomain, and to your own domain at no extra cost.

More of what the editor does

Also useful: how the Figma import works and Siter.io pricing in full.

Design it once, then make it fit.

Send the Figma frame across, finish the desktop layout on the canvas, then adjust the two narrower views until they read properly. The free plan builds and previews as much as you like, and publishing needs a paid plan.
Get the plugin ->
Start for free with Siter.io
Start for free ->