Episode 04 game · Vishwa · Earth
Vishwa’s Walls
Drag the screen width and watch the product cards. Place up to three breakpoints where the layout needs another column, so every card stays between 200 and 460px from 320 to 1440px.
VishwaDon’t ask which phone. Ask where the cards start to suffer. Drag the width slowly and build a wall the moment they need one.
04Seal 04
Your CSS
Width test
320px1440px
Press “Test every width” to sweep from 320 to 1440px. Green is comfortable, amber is stretched, red is squashed.
Vishwa’s bonus: for a simple card grid, you can skip breakpoints entirely and let the browser decide:
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));New seal earned
Walls built
Acharya’s Rule #4Let the content choose the breakpoint, not the device.
Content decides
Breakpoints go where the layout breaks, not at device widths.
Mobile-first
One column by default, then min-width queries add columns.
Order matters
With equal specificity, the last matching rule wins.