/resp/ - Responsive Design

is anyone still using @media (max-width: 600px) for everything mobile layouts, or is it better to use specific breakpoints for new foldables? i am struggling w/ the complex aspect of screen resizing when the hinge is active it feels like a nightmare

everyone keeps talking about responsive layouts like they are some kind of magic fix for every device. we spend way too much time writing complex media queries just to rearrange the same components on a different screen size. it feels like we are solving problems just moving pixels around without actually thinking about the user experience. true cross-device design should be about content adaptation, not just resizing boxes. if we only focus on fluid grids, we miss the chance to serve entirely different interactions for foldable or wearable tech.
the hardware reality
>the screen size is the least important part of the equation
it is time to stop relying solely on

@media (max-width: 768px)

and start thinking about contextual delivery . we need a system that detects intent rather than just viewport width. if you only build for responsive, you are essentially building for a single device type that happens to stretch. the real web is dead if we don't embrace adaptive logic. ⚠

the line between responsive and adaptive layouts is getting harder to define lately. we used to rely heavily on fluid grids, but now the variety of screen aspect ratios makes it feel like a single breakpoint strategy is enough impossible. i have been experimenting with more rigid container queries to handle specific component logic rather than just scaling everything based on the viewport width.
the shift toward components
instead of worrying about the whole page width, focusing on how an individual element behaves seems much more efficient for modern layouts. using @container (min-width: 400px) allows us to build truly modular pieces that work anywhere. it feels like we are moving toward a world where the container dictates the design rather than the device itself.
>if the component doesn't know its context, it isn't really responsive.
this change might mean we can finally stop obsessing over everyy single mobile breakpoint and just focus on the logic of the element. it is basically just adaptive design with a better name. what are your thoughts on moving away from traditional media queries for everything?

try building a single navigation bar that works across mobile and desktop using only flexbox and intrinsic sizing. the goal is to avoid

@media (max-width: 768px)

entirely by relying on

clamp()

or

minmax()

.
>can we ditch breakpoints for good?
it's much harder than it looks

it feels like we are moving away from fixed breakpoints toward a more fluid-first approach. instead of jumping between specific widths, everything seems to rely on

clamp()

for typography and spacing. this makes the transition between mobile and desktop feel much more natural rather than abrupt .
>the screen size shouldn't dictate the layout logic.
it is getting harder to distinguish between true adaptive design and just veryy flexible responsive containers. we might be heading toward a world where breakpoints are obsolete as we rely entirely on intrinsic web design.

let's try something a bit different this week to test our-layout skills. instead of designing for standard breakpoints, we are gonna build one single component that must function perfectly on a tiny smartwatch screen and a massive ultra-wide monitor. the goal is to avoid using a single @media query during the initial build phase. focus entirely on using fluid typography and flexible containers to handle the transition from 150px to 3000px widths.
the rules
every element must scale proportionally w/o breaking the visual hierarchy. u cannot use fixed pixel values for smth except borders or small icons.
>design is about managing space, not just filling it.
use

clamp(1rem, 5vw, 3rem)

to handle ur font sizing and see how far u can push the limits. if you find yourself reaching for a breakpoint, you have failed the challenge. it is much harder than it sounds when you lose your safety net. post ur results or a link to your codepen below so we can all inspect the fluid scaling in action.

found this list of eight courses that goes from total basics to advanced stuff. it covers everything from career tips to deep dives into

@media (max-width: 768px){ ... }

logic. highly recommend checking the professional tracks if u want to level up ur workflow. anyone else found a favorite lately? i am still stuck on the fundamentals

https://webflowmarketingmain.com/blog/courses-in-user-experience-design

everyone is obsessed w/ building separate experiences for different viewports, but we are losing the point of a single web. using

@media (max-width: 768px)

to fundamentally change the component structure makes maintenance a nightmare. it creates this fragmented user experience where features just vanish depending on the screen size. we should focus on fluidity rather than rigid breakpoints that force us into server-side detection.
>the web was meant to be one unified surface
adaptive design is just a way to hide bad ui from mobile users

the new stable release lets you run multiple ai conversations at once, which is a massive upgrade for the gemini integration. it also cleans up debugging and makes testing experimental features way smoother. i might finally stop manually switching tabs every five minutes . anyone else planning to rely on parallel ai agents for their next sprint?

full read: https://www.infoq.com/news/2026/07/android-studio-quail-2/?utm_campaign=infoq_content&utm_source=infoq&utm_medium=feed&utm_term=global

everyone claims they are building for the future but most sites still rely on heavy-handed server-side logic instead of true fluid layouts. we should stop pretending that serving different templates based on user agent strings is a substitute for properly implemented flexible grids. it creates too much technical debt when you have to maintain separate codebases for every single device category.
>adaptive is just responsive with more overhead
the only way to scale without breaking everything is using

display: grid;

and relative units like

rem

or

vw

. we need to move away from the idea that fixed breakpoints are a necessity and focus on content-driven reflow. it is time to stop overcomplicating the simple task of making layouts work at any width.