WeWeb Responsive Design: Breakpoints, Mobile-First, and Best Practices

WeWeb has exactly three breakpoints: Desktop (≥992px, the base), Tablet (768–991px), and Mobile (≤767px). The cascade flows one way: Desktop → Tablet → Mobile. If you set a font size of 48px on Desktop and do nothing else, it is also 48px on Tablet and Mobile. If you override it to 32px on Tablet, Mobile inherits the 32px override — not the Desktop value. Switch between breakpoints using the device icons in the top navigation bar of the editor. The currently active breakpoint is highlighted. Any style change you make in the Styling panel on the right applies only to the active breakpoint and below. There are no custom breakpoints available — 992px, 768px, and 767px are fixed. If your design requires a 1280px breakpoint, the workaround is to use relative units so styles scale gracefully rather than breaking at a fixed pixel threshold.

In the left panel, click Add element (+) → Container → Flexbox Container. Flexbox containers are the primary tool for responsive layout in WeWeb. In the Styling panel → Layout section, you can set: flex-direction (row or column), justify-content (how items are distributed along the main axis), align-items (alignment on the cross axis), gap (spacing between children), and flex-wrap (whether items wrap to new lines). For a two-column desktop layout that stacks on mobile: set direction to 'row' at Desktop, then switch to Mobile breakpoint and override direction to 'column'. The gap, alignment, and padding settings can be overridden per breakpoint the same way. Avoid using fixed-width columns with pixel values — they will not adapt. Use percentage widths or flex-grow settings instead. For a 50/50 split, set each child container's Flex → Grow to 1.

In the Styling panel, width, height, font-size, padding, and margin fields all accept relative units. Prefer these over fixed pixel values for any measurement that should scale. Percentage (%) works relative to the parent container — use it for widths. Viewport units (vw, vh) work relative to the screen size — use vw for full-width elements. rem is relative to the root font size (default 16px in browsers) — use it for typography and spacing. em is relative to the current element's font size — useful for component-scoped spacing. For fluid typography that scales smoothly between breakpoints without per-breakpoint overrides, use clamp() in the element's Custom CSS field in the Styling panel. Example: font-size: clamp(16px, 2vw, 24px) sets a minimum of 16px, preferred of 2vw, and maximum of 24px.

1/* Injection point: Styling panel → element Custom CSS field */
2/* Fluid font size that scales between breakpoints */
3.my-heading {
4  font-size: clamp(24px, 4vw, 56px);
5  line-height: 1.2;
6}
7
8/* Full-width section with responsive side padding */
9.hero-section {
10  width: 100%;
11  padding-left: clamp(16px, 5vw, 80px);
12  padding-right: clamp(16px, 5vw, 80px);
13}

Switch to the Tablet breakpoint using the top nav icons. Now any change you make in the Styling panel applies only to Tablet and Mobile (not Desktop). To override the column layout: select your flexbox container, go to Styling panel → Layout, change flex-direction to 'column', and adjust gap and alignment as needed. To override text sizes: select a heading element, go to Styling panel → Typography, and change the font size. A small indicator dot appears next to overridden properties to show they differ from the Desktop value. To reset a property back to its inherited Desktop value, right-click the property or click the reset icon that appears on hover. Repeat this process for Mobile breakpoint. You do not need to rebuild the layout — you are only setting exceptions to the base Desktop styles.

CRITICAL: Never delete an element while on Tablet or Mobile breakpoint. Deleting an element in WeWeb always removes it from all breakpoints regardless of which breakpoint is active — there is no breakpoint-scoped deletion. To hide an element on mobile only: with the Mobile breakpoint active, select the element, go to Styling panel → Layout → Display, and change display to 'none'. The element is hidden on Mobile but remains visible on Desktop and Tablet. Alternatively, use Conditional Rendering for a cleaner approach: select the element → Settings panel → Conditional Rendering → bind to a formula. For breakpoint-specific visibility, bind to a variable you control manually. To show a mobile-only element (like a hamburger menu), add it at Desktop breakpoint, set its display to 'none' at Desktop and Tablet, and 'flex' at Mobile.

Drag a Top Navigation Bar element from Add element (+) → Navigation onto your page. The built-in Top Navigation Bar includes a hamburger menu that automatically appears at Mobile breakpoint — no configuration required. To customize when the mobile menu appears: select the Top Navigation Bar → Settings panel → find the 'Mobile breakpoint' or collapse threshold setting and adjust as needed. For a custom navigation (not using the built-in component): create a desktop nav container with your links, then create a separate mobile container with a hamburger icon. At Desktop breakpoint, set the desktop nav to display:flex and the mobile container to display:none. At Mobile breakpoint, reverse these display values. Add a workflow to the hamburger icon: On click → Change variable value (Boolean 'mobileMenuOpen' = true). Bind the mobile menu's display to that variable.

The WeWeb editor breakpoint preview is a starting point, but it does not always accurately reflect real device behavior — particularly because the editor renders at fixed canvas widths (1440px Desktop, ~768px Tablet, ~400px Mobile) while actual devices vary. After you are satisfied with the editor preview, publish your app and test in a real browser. In Chrome DevTools (F12 → device toolbar icon), you can test at arbitrary widths including 375px (iPhone SE), 390px (iPhone 14), 412px (Android), and 428px (iPhone 14 Pro Max). WeWeb's Mobile breakpoint activates at ≤767px, so all of these fall under the Mobile breakpoint. Also test at 768px (Tablet boundary) and 991px (Tablet/Desktop boundary) to verify your layout transitions look correct. Pay particular attention to text overflow, images that stretch or overflow containers, and form elements that may be too small to tap on mobile.