This page specifies how the DomiDo Progressive Web App adapts across device sizes. The application is mobile-first, with five named breakpoints driving navigation, layout, type density, the 3D viewer, the gallery grid, and every other surface where geometry has to change with the viewport. Every customer-facing screen and every admin dashboard view is rendered identically by the same React Native code, with breakpoint-aware decisions inside each component rather than separate device-specific code paths. The patterns below cover how the bottom tab bar reflows into a side rail, how the gallery grid changes column count, how the 3D viewer divides space with the Bill of Materials, how sticky elements protect the purchase decision, and how the operating system's reduced-motion and reduced-data preferences modify the experience.
Five named widths drive every responsive decision: extra-small at three hundred and twenty pixels for the smallest phones, small at three hundred and seventy-five pixels for standard phones, medium at seven hundred and sixty-eight pixels for tablets in portrait, large at one thousand and twenty-four pixels for tablets in landscape and small laptops, and extra-large at one thousand four hundred and forty pixels for desktops and large monitors.
The layout grid changes with the breakpoint: four columns and sixteen-pixel gutters with sixteen-pixel margins on phones; eight columns and twenty-four-pixel margins on tablets in portrait; twelve columns with thirty-two-pixel margins on tablets in landscape and small laptops; twelve columns with twenty-four-pixel gutters and an automatically-centred container with a maximum content width of one thousand three hundred and ninety-two pixels on wide desktops.
Phones use the bottom tab bar — fifty-six pixels plus the safe-area inset, five tabs, twenty-four-pixel icons, and eleven-pixel captions. Tablets in portrait switch to a collapsed left side rail seventy-two pixels wide with icons centred and tooltips on hover; an active tab carries a four-pixel left-edge indicator. Tablets in landscape and small laptops expand the side rail to two hundred and forty pixels showing both icon and label, with a primary-tinted background on the active item. Wide desktops use the same expanded sidebar at two hundred and eighty pixels with a user profile card at the bottom (avatar, name, and a settings gear). The admin dashboard uses a different scheme tuned for dashboard workflows: phones get a hamburger drawer occupying eighty-five per cent of the viewport; tablets get a collapsed dark-forest sidebar at seventy-two pixels; landscape tablets and laptops get an expanded dark-forest sidebar at two hundred and sixty pixels; wide desktops get the same sidebar at two hundred and eighty pixels with nested sub-navigation.
Phones display the gallery in two columns with one-hundred-and-thirty-six- or one-hundred-and-sixty-three-pixel cards and eight-pixel gaps. Tablets in portrait switch to three columns with two-hundred-and-twenty-four-pixel cards and twelve-pixel gaps. Landscape tablets and laptops use four columns with two-hundred-and-sixteen-pixel cards and sixteen-pixel gaps. Wide desktops also use four columns with three-hundred-and-twenty-two-pixel cards and the same gap. Image aspect ratio remains four-to-three on every size. Tablets and above support an optional masonry layout where card heights vary between three-to-four and sixteen-to-nine ratios, with items packed into the shortest column.
On phones the standalone viewer (on Design Review and Product Detail) occupies the full viewport width and either two hundred and eighty or three hundred and twenty pixels of height. Tablets in portrait push the viewer to four hundred and eighty pixels tall at full main-area width. Landscape tablets and laptops shift to a side-by-side layout: the viewer occupies sixty per cent of the main area at full content-area height; the Bill of Materials and call-to-action panel sits in the remaining forty per cent. Wide desktops use the same split with the viewer at sixty-five per cent. Viewer controls sit at the bottom on every breakpoint, with edge padding scaling from eight to sixteen pixels. View-mode tabs sit at the top, centered. The step counter sits at the top-right on every breakpoint with the same edge-padding scale. Playback controls sit below the control bar on phones (to keep them in the thumb zone) and above the control bar on tablets and above (where they can sit centered without obstructing the model).
Product cards run two columns on phones, three on tablets in portrait, four on landscape tablets and laptops (or two-with-sidebar layouts), and four on wide desktops (or three-with-sidebar). Order cards stack full-width on phones and tablets in portrait, then switch to a two-column grid on larger screens. Admin metric cards stack on phones, two-up on tablets in portrait, and four-up on landscape tablets and wider — a single row at every wider size. The Design Review and Gallery Detail purchase calls-to-action are sticky at the viewport bottom on phones. The cart summary sits at the viewport bottom on phones, then becomes a right-rail panel on tablets in landscape and wider. The admin sidebar is always sticky regardless of breakpoint. The bottom tab bar is sticky on phones.
Density rises with screen size. Body text remains the same fourteen-pixel default but headings scale: H1 stays at twenty-eight pixels on phones and grows to thirty-two on wide desktops; the hero display jumps to forty or forty-eight pixels for marketing surfaces. Touch targets remain at least forty-four points on every breakpoint — never smaller, even on desktops where the cursor is precise, because the same code runs on touch laptops.
Portrait is primary on every phone and tablet. Landscape is a first-class layout on phones for the Assembly Viewer and the gallery 3D viewer (so a user can compare the model with a physical kit) and on tablets and above for every screen with a viewer. The Design Review side-by-side layout assumes landscape geometry; on a phone in landscape the viewer reduces to forty per cent of the viewport height to leave room for the sticky purchase call-to-action. Admin tables collapse to horizontal scrolling on phones with a frozen first column, expand to a full-width responsive table on tablets in landscape and above, and gain hover-only quick actions on desktops where pointer precision allows.
When the operating system reports reduced motion, slide-and-scale transitions become fades and skeleton shimmer becomes a static fill. When the operating system reports reduced data, the gallery loads lower-resolution thumbnails and the 3D viewer defers its physically-based-rendering textures until the user interacts.
The Bill of Materials, the assembly instructions, and the order confirmation are designed for print export as well as on-screen viewing. Print layouts use a single-column grid, drop the 3D viewer in favour of the canonical orthographic snapshots, and inline every piece of context that would normally be a tooltip.