How do you make responsive layouts less of a grind?

Start with the smallest layout and add space as it becomes available. It forces you to decide what really matters on a narrow screen, rather than trying to squeeze a desktop arrangement into it later. Then check a few awkward widths too, not just familiar device presets. The rough middle ground is where a lot of layouts start to wobble.

For a game UI, I’d avoid treating every screen as one layout that just shrinks. Share the data and behavior, but let portrait and landscape use different compositions when the available space changes what players need to see. That can mean a different panel arrangement or navigation, not necessarily maintaining two entirely separate interfaces.

Container queries are worth learning when the same component appears in spaces of different sizes. A panel can respond to its own width instead of guessing based on the whole viewport, which makes reusable UI behave more predictably. Media queries still make sense for bigger page-level changes, so I wouldn’t try to replace every breakpoint with container queries.

Keep the testing loop cheap. Use browser resizing and device emulation while you’re building, and keep a short checklist of the important combinations: narrow portrait, wide portrait, small landscape, and a mid-size laptop. Then test on real devices before calling it done. Emulation catches plenty, but touch behavior and browser chrome can still change the usable space.

Pick a primary layout and finish that first. Trying to polish every orientation and screen size at once makes it hard to tell whether the design itself works. Once the core version is solid, handle the other layouts in order of importance, and simplify or hide secondary controls where that’s better than cramming them in.