Is it possible to create a separate mobile version of my website in Webflow, with a different site structure, code, and images specifically for mobile devices?
- Webflow uses responsive design, so you can't have separate HTML/page structures for mobile, but you can customize visibility and layout per breakpoint.
- Use show/hide elements, conditional visibility, and media queries for mobile-specific content, and optimize assets manually or with Webflow's responsive image handling.
- For completely different mobile structure or code, create a separate project and redirect mobile users with custom code, though this is not supported by Webflow.
Webflow does not support entirely separate mobile versions of a site with different structure, code, or assets. However, you can optimize and customize content for mobile views using responsive design techniques.
1. Webflow's Core Model: Responsive Design
- Webflow is built around responsive design, which means your site’s structure and content adapt across breakpoints (desktop, tablet, and mobile).
- You cannot have separate HTML/PAGE structures for mobile vs. desktop within the same Webflow project.
- All styles and layout changes cascade from desktop down to mobile unless customized per breakpoint.
2. Mobile-Specific Content Options
You can create the appearance of a different structure using the following methods:
- Show/Hide Elements by Breakpoint
Use the Display setting in the Style panel to control visibility. For example, set a desktop version of a section to Display: None on mobile, and vice versa.
- Conditional Visibility with CMS
If using dynamic content, use conditional visibility filters (e.g., show a mobile version of a CMS item based on a field value or screen width).
- Custom Media Queries (Advanced)
Embed CSS in the Page Settings > Custom Code area to write custom media queries—but this won't give you different HTML, just visual differences.
3. Assets and Image Optimization
- You can serve different images by adding two image elements and hiding each on the opposite breakpoint.
- Webflow auto-generates multiple responsive image sizes. You can enhance this using the
loading="lazy"attribute and by optimizing images manually for mobile.
4. Workarounds for Truly Separate Versions
If you absolutely need completely different code or structure:
- Create a Separate Webflow Project for your mobile site, and use custom JavaScript or server-side code to redirect mobile traffic to that separate domain or subdomain (e.g.,
m.example.com). - This is not officially supported by Webflow and requires manual domain configuration and more maintenance.
Summary
You cannot build a fully separate mobile site within Webflow in terms of code and structure. However, you can customize layout, visibility, and content display per device using responsive design tools and conditional visibility. For a drastic separation, hosting a different mobile site is the only option, but it falls outside standard Webflow capabilities.