How can I create a scaled-down version of my desktop website for all breakpoints in Webflow until I can optimize it for mobile?
TL;DR
- Wrap all site content in a parent “Site Wrapper” container.
- Apply a transform scale using
calc(100vw / 1440)and set transform origin to top-left. - Set the wrapper's width to 1440px and body overflow to hidden.
- Apply these styles only on smaller breakpoints, keeping desktop unchanged.
- Remove scaling and redesign responsively when ready for proper mobile optimization.
To create a scaled-down version of your desktop website across all breakpoints in Webflow temporarily, you can apply a responsive scaling technique that visually shrinks the layout on smaller screens.
1. Wrap Your Entire Site in a Parent Container
- Create a
<div>block and name it something like “Site Wrapper”. - Move all main page content inside this wrapper. This includes navbars, sections, footers, etc.
- This wrapper will allow you to scale everything inside proportionally.
2. Apply a Transform Scale Using VW Units
- Select your Site Wrapper.
- In the Style panel, apply the following:
- Transform > Scale: Set both X and Y to
calc(100vw / 1440)— assuming 1440px is your desktop design width. - Alternatively, use a rough percentage: 75%–90% depending on the breakpoint.
- This scales your content based on viewport width but keeps proportions consistent.
3. Set Transform Origin to Top Left
- Still in the Site Wrapper settings:
- Under Transform > More Options, set Origin to Top Left (0%, 0%) so scaling anchors from the top left corner.
4. Adjust Wrapper Width and Overflow
- Set the Site Wrapper width to your original desktop width (e.g., 1440px).
- Set Body overflow to hidden to avoid horizontal scrollbars.
5. Apply on Smaller Breakpoints Only
- In Webflow, go to each breakpoint (e.g., Tablet, Mobile Landscape, Mobile Portrait).
- Apply the scaling transform only to these views—leave Desktop untouched.
6. Disable or Remove When Ready to Optimize
- Once you’re ready to do real mobile optimization:
- Remove the transform and fixed width from the Site Wrapper.
- Redesign elements responsively per breakpoint using standard Webflow tools.
Summary
To create a temporary scaled-down version for smaller breakpoints in Webflow, wrap all content in one container and apply a CSS transform: scale based on viewport width. Use this method to maintain your desktop layout visually while postponing mobile optimization.