Responsive Layout Tester

Preview HTML layouts at multiple viewport widths simultaneously with device frame overlays.

Developer & Code

This tool is being rebuilt

The earlier version did not work as described, so it is switched off until a tested version replaces it at this same address.

Tell us what you need it for

Tools that work today

CSS Multi-Column Layout Generator Configure CSS multi-column layouts with column count, gap, rule, and span properties with live preview.
Responsive Image Srcset Generator Build responsive image srcset and sizes attributes for optimal image delivery across screen sizes.
CSS Grid Layout Generator Design CSS Grid layouts visually with drag-and-drop and export clean CSS code.
Page Layout Generator Generate common page layouts (sidebar + content, 3-column, masonry) with CSS Grid or Flexbox code.
CSS Container Query Playground Experiment with CSS container queries by resizing containers and seeing responsive style changes.
CSS Flexbox Playground Experiment with Flexbox properties visually and copy the generated CSS code.

Web app by bee2.io

MAPb2

Visual thinking tools

208 visual-thinking tools for turning loose ideas into maps, diagrams, and decisions.

Open MAPb2

Mac app by bee2.io

ScholarBindery

Private study library

Turns PDFs, slides, scans, and recorded lectures into a private spaced-repetition study library scheduled by the FSRS algorithm.

More Developer & Code tools

JSON Schema Validator Every error at its exact path, by the real rules.
CONTRIBUTING.md Generator Every command in it is one your project runs.
Changelog Generator from Git Log From commits to a checked changelog and version.
Commit Message Builder and Checker Proposed from the diff, checked against the spec.
README Generator from Your Project Your manifest, your scripts, your README.
AST Explorer Click the code, see the node; click the node, see the code.

What is it about?

What's missing Something isn't working Could be better Another tool I need Other

Your message (required)

0 / 2000 characters, at least 10

Name (optional)

Email (optional, for a reply)

Leave this field empty

Sent with your message: the address of this page, b2kit.com/tools/responsive-layout-tester/

Pressing Send gives your message and this page's address to bee2.io, the team behind b2KIT. Your name and email go along only if you enter them, and any reply goes to that email. How we handle feedback

Sent. Thank you.

This tool is being rebuilt

Help improve this tool Tell us what is missing, broken or worth adding. One minute.