Where responsive behaviour actually lives
Breakpoints are stylesheet rules, not markup. When a migration copies HTML and rewrites CSS, those rules get approximated. With Eleventy the risk is amplified because the design depends on the final rendered HTML regardless of template language.
Capturing every breakpoint
The stylesheet is captured whole, so all media queries travel with it, not just the width you happened to be viewing.
- Mobile, tablet and desktop media queries
- Container queries where used
- Responsive image srcsets and sizes
- Fluid typography and clamp() rules
- Touch-friendly spacing and tap targets
Run the conversion
Load the page at desktop width with everything scrolled into view, then capture.
- Open the page you want to convert in Chrome.
- Click the Themify extension icon in the toolbar.
- Press Generate theme and wait for the capture to finish.
- In wp-admin, go to Appearance → Themes → Add New → Upload Theme.
- Upload the .zip, activate it, and the page is live on WordPress.
Post-conversion mobile QA
Test on a real device, not just a resized window. Check sticky headers, modal scroll locking, form zoom behaviour and menu interactions.
Frequently asked questions
- Does the Eleventy mobile layout survive conversion?
- Yes. Media queries live in the captured stylesheet, so every breakpoint comes across.
- What about responsive images?
- srcset and sizes attributes are preserved and the referenced image variants are bundled.
- Do I need a separate mobile theme?
- No. The converted theme is responsive because the original page was.