Converting a static site to responsive

This five-step series walks you through the full process of taking an existing fixed-width Site Designer project and making it responsive — without redesigning it from scratch.

What you need: An existing Site Designer project that looks good at desktop width but breaks at mobile.

Time to complete: ~30–60 minutes depending on project complexity.

Step 1: Audit the desktop layout

Before touching any breakpoints, understand what you’re working with.

1. Open the project and go to full desktop width

   Drag the width slider all the way to the right (1440px+). Verify the desktop layout looks exactly as intended.

2. Identify fixed-width elements

   In the Outline pane, scan for elements with explicit width values in pixels. These are your primary candidates for responsive fixes — they won’t shrink to fit smaller screens.

3. Note multi-column sections

   Make a list of every section that has two or more side-by-side columns. Each of these will need to stack on mobile.

4. Check font sizes

   Large display headings (h1, h2) set in fixed px values won’t scale down. Mark these for clamp() conversions.

Step 2: Replace fixed widths with flexible units

1. Convert fixed-width containers to max-width + 100%

   Select any element with width: 960px (or similar). Change it to width: 100% + max-width: 960px. This lets it shrink on small screens but cap at 960px on large ones.

2. Convert percentage-based widths where appropriate

   Side-by-side columns with width: 480px on a 960px parent can become width: 50%. They’ll still align at desktop but scale proportionally.

3. Add padding instead of fixed margins

   Replace margin-left: 80px with padding-inline: 2rem on the container. Percentage margins can cause unexpected behavior at small sizes.

Step 3: Make typography fluid

1. Identify large headings

   Find your h1 and large h2 elements. If they use a fixed font-size: 72px, they’ll overflow on mobile.

2. Replace with clamp()

   In the Style pane, switch to the custom CSS field (if available) or use breakpoint mode. The formula: clamp(minimum, preferred, maximum). Example: font-size: clamp(2rem, 5vw, 4.5rem) — never smaller than 32px, never larger than 72px, scaling with viewport width in between.

3. Update line-height and letter-spacing

   Large display text often has tight letter-spacing: -0.05em. This looks great large but can be hard to read small. In mobile breakpoint mode, reset to letter-spacing: -0.02em.

Step 4: Add breakpoints and stack layouts

1. Set your breakpoints

   Open the Breakpoint Manager (button next to width slider). Add breakpoints at: 768px (tablet) and 480px (mobile). If you already have breakpoints, verify these are included.

2. Enter 768px breakpoint mode

   Click the 768px breakpoint line. The canvas border turns orange — you’re now editing tablet styles.

3. Stack multi-column sections

   For each two-column Flex row, set flex-direction: column. For CSS Grid containers, set grid-template-columns: 1fr. Elements that were side-by-side now stack vertically.

4. Adjust spacing

   Reduce large padding: 6rem 0 sections to padding: 3rem 1.5rem at tablet. Generous desktop spacing becomes wasteful on smaller screens.

5. Repeat at 480px

   Enter 480px breakpoint mode. Check for anything still too wide. Reduce padding further (1rem). Make sure images don’t overflow.

Step 5: Test and polish

1. Slow-drag test again

   Exit breakpoint mode. Drag the width slider slowly from 1440px down to 320px. Watch for any layout breaks between your breakpoints — add a new breakpoint at that width if needed.

2. Test in Live Preview

   Open Live Preview. On macOS, resize the browser window. On Windows, use browser DevTools device mode (F12 → mobile icon).

3. Test on a real device

   If you have a phone or tablet, open the Live Preview URL on the device (both need to be on the same WiFi network). Real touch interactions sometimes reveal issues that window resizing misses.

4. Check navigation on mobile

   Desktop navbars almost always need a hamburger menu for mobile. If yours doesn’t have one, see the Menu Builder guide for how to add a mobile-friendly nav.