https://nalar.dev/tags/responsive-design/ Recent content in Responsive Design on Nalar Hugo en-us Tue, 01 Sep 2026 00:00:00 +0700 https://nalar.dev/container-queries-component-responsive-design/ Tue, 01 Sep 2026 00:00:00 +0700 https://nalar.dev/container-queries-component-responsive-design/ <p>Media queries answer a viewport-level question: how wide is the browser? Reusable components often need a different answer: how much space does <em>this component</em> have where it was placed?</p> <p>CSS container queries solve that problem. A card can render compactly in a sidebar and switch to a horizontal layout in a wide content area without knowing either page layout in advance.</p> <h2 id="why-viewport-breakpoints-leak-layout-assumptions">Why viewport breakpoints leak layout assumptions</h2> <p>Consider a reusable article card. A media query might switch it to two columns when the viewport exceeds 900 pixels:</p> https://nalar.dev/css-logical-properties-for-international-layouts/ Tue, 01 Sep 2026 00:00:00 +0700 https://nalar.dev/css-logical-properties-for-international-layouts/ <p>CSS traditionally describes spacing and borders with physical directions such as <code>left</code>, <code>right</code>, <code>top</code>, and <code>bottom</code>. That works until a component must support right-to-left text or a writing mode where the inline direction is not horizontal.</p> <p>Logical properties describe layout relative to the flow of text. They make components more adaptable without maintaining a second set of directional overrides.</p> <h2 id="physical-versus-logical-directions">Physical versus logical directions</h2> <p>In a typical English document, the inline axis runs from left to right and the block axis runs from top to bottom. Logical properties name those axes instead of assuming screen directions.</p>