Skip to content

Make it work on a phone

Check this page at phone and tablet widths and fix what breaks

Make this page work well from 360 to 1440 pixels wide. Look at it at 360, 390, 768, 1024 and 1440 and fix what breaks: - Nothing scrolls sideways. Find what is wider than the screen and fix that element, not the page's overflow. - Columns stack in reading order. Grids go to one column on a phone unless the items are small. - Text sizes step down on small screens so headlines break in good places. No single word alone on a last line. - Anything you can tap is at least 44 pixels tall, with space between neighbors. - Navigation: links that do not fit go behind a menu or are trimmed to the essential ones. - Images and embeds keep their proportions and never overflow. Write mobile first: the bare classes are the phone, and md: and lg: add the larger layouts. Do not hide content on phones that someone would need there. Keep it editable on midcode's canvas: write text and class names literally in the markup (no class names built from variables or helpers), one element per thing I might want to select, and Tailwind classes for every style. Tell me what you changed at each width.

Other prompts