{"id":357080,"date":"2021-11-22T07:29:03","date_gmt":"2021-11-22T15:29:03","guid":{"rendered":"https:\/\/css-tricks.com\/?p=357080"},"modified":"2023-07-06T14:22:29","modified_gmt":"2023-07-06T21:22:29","slug":"responsive-layouts-fewer-media-queries","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/responsive-layouts-fewer-media-queries\/","title":{"rendered":"Responsive Layouts, Fewer Media Queries"},"content":{"rendered":"\n<p>We cannot talk about web development without talking about Responsive Design. It\u2019s just a given these days and has been for many years. <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-css-media-queries\/\">Media queries<\/a> are a part of Responsive Design and they aren\u2019t going anywhere. Since the introduction of media queries (literally decades ago), CSS has evolved to the points that there are a lot of tricks that can help us drastically reduce the usage of media queries we use. In some cases, I will show you how to replace multiple media queries with only one CSS declaration. These approaches can result in less code, be easier to maintain, and be more tied to the content at hand.<\/p>\n\n\n\n<!--more-->\n\n\n\n<p>Let\u2019s first take a look at some widely used methods to build responsive layouts without media queries. No surprises here \u2014 these methods are related to <a href=\"https:\/\/css-tricks.com\/snippets\/css\/a-guide-to-flexbox\/\">flexbox<\/a> and <a href=\"https:\/\/css-tricks.com\/snippets\/css\/complete-guide-grid\/\">grid<\/a>.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-flex-and-flex-wrap\">Using <code>flex<\/code> and <code>flex-wrap<\/code><\/h3>\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='199' src='https:\/\/videopress.com\/embed\/mRQblPtB?cover=1&amp;loop=1&amp;muted=1&amp;persistVolume=0&amp;preloadContent=metadata&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><figcaption><a href=\"https:\/\/codepen.io\/t_afif\/pen\/zYNggoq\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Live Demo<\/strong><\/a><\/figcaption><\/figure>\n\n\n\n<p>In the above demo, <code>flex: 400px<\/code> sets a base width for each element in the grid that is equal to <code>400px<\/code>. Each element wraps to a new line if there isn\u2019t enough room on the currently line to hold it. Meanwhile, the elements on each line grow\/stretch to fill any remaining space in the container that\u2019s leftover if the line cannot fit another <code>400px<\/code> element, and they shrink back down as far as <code>400px<\/code> if another <code>400px<\/code> element can indeed squeeze in there.<\/p>\n\n\n\n<p>Let\u2019s also remember that <a href=\"https:\/\/css-tricks.com\/understanding-flex-grow-flex-shrink-and-flex-basis\/\"><code>flex: 400px<\/code> is a shorthand<\/a> equivalent to <code>flex: 1 1 400px<\/code> (<code>flex-grow: 1<\/code>, <code>flex-shrink: 1<\/code>, <code>flex-basis: 400px<\/code>).<\/p>\n\n\n\n<p>What we have so far:<\/p>\n\n\n\n<ul>\n<li>&#x2714;&#xfe0f; Only two lines of code<\/li>\n\n\n\n<li>&#x274c; Consistent element widths in the footer<\/li>\n\n\n\n<li>&#x274c; Control the number of items per row<\/li>\n\n\n\n<li>&#x274c; Control when the items wrap<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-using-auto-fit-and-minmax\">Using <code>auto-fit<\/code> and <code>minmax<\/code><\/h3>\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='199' src='https:\/\/videopress.com\/embed\/KsK2GlTh?cover=1&amp;loop=1&amp;muted=1&amp;persistVolume=0&amp;preloadContent=metadata&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><figcaption><a href=\"https:\/\/codepen.io\/t_afif\/pen\/wvgVVPN\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Live Demo<\/strong><\/a><\/figcaption><\/figure>\n\n\n\n<p>Similar to the previous method, we are setting a base width\u2014thanks to <code>repeat(auto-fit, minmax(400px, 1fr))<\/code>\u2014and our items wrap if there\u2019s enough space for them. This time, though we\u2019re reaching for CSS Grid. That means the elements on each line also grow to fill any remaining space, but unlike the flexbox configuration, the last row maintains the same width as the rest of the elements.<\/p>\n\n\n\n<p>So, we improved one of requirements and solved another, but also introduced a new issue since our items cannot shrink below <code>400px<\/code> which may lead to some overflow.<\/p>\n\n\n\n<ul>\n<li>&#x2714;&#xfe0f; Only one line of code<\/li>\n\n\n\n<li>&#x2714;&#xfe0f; Consistent element widths in the footer<\/li>\n\n\n\n<li>&#x274c; Control the number of items per row<\/li>\n\n\n\n<li>&#x274c; Items grow, but do not shrink<\/li>\n\n\n\n<li>&#x274c; Control when the items wrap<\/li>\n<\/ul>\n\n\n\n<p>Both of the techniques we just looked at are good, but we also now see they come with a few drawbacks. But we can overcome those with some CSS trickery.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-control-the-number-of-items-per-row\">Control the number of items per row<\/h3>\n\n\n<p>Let&#8217;s take our first example and change <code>flex: 400px<\/code> to <code>flex: max(400px, (100% - 20px)\/3)<\/code>.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abpeeeV\" src=\"\/\/codepen.io\/anon\/embed\/abpeeeV?height=450&amp;theme-id=1&amp;slug-hash=abpeeeV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abpeeeV\" title=\"CodePen Embed abpeeeV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Resize the screen and notice that each row never has more than three items, even on a super wide screen. We have limited each line to a maximum of three elements, meaning each line only contains between one and three items at any given time.<\/p>\n\n\n\n<p>Let\u2019s dissect the code:<\/p>\n\n\n\n<ul>\n<li>When the screen width increases, the width of our container also increases, meaning that <code>100%\/3<\/code> gets bigger than <code>400px<\/code> at some point.<\/li>\n\n\n\n<li>Since we are using the <code>max()<\/code> function as the width and are dividing <code>100%<\/code> by <code>3<\/code> in it, the largest any single element can be is just one-third of the overall container width. So, we get a maximum of three elements per row.<\/li>\n\n\n\n<li>When the screen width is small, <code>400px<\/code> takes the lead and we get our initial behavior.<\/li>\n<\/ul>\n\n\n\n<p>You might also be asking: <em>What the heck is that <code>20px<\/code> value in the formula?<\/em><\/p>\n\n\n\n<p>It&#8217;s twice the grid template\u2019s <code>gap<\/code> value, which is <code>10px<\/code> times two. When we have three items on a row, there are two gaps between elements (one on each on the left and right sides of the middle element), so for <code>N<\/code> items we should use <code>max(400px, (100% - (N - 1) * gap)\/N)<\/code>. Yes, we need to account for the <code>gap<\/code> when defining the width, but don\u2019t worry, we can still optimize the formula to remove it!<\/p>\n\n\n\n<p>We can use <code>max(400px, 100%\/(N + 1) + 0.1%)<\/code>. The logic is: we tell the browser that each item has a width equal to <code>100%\/(N + 1)<\/code> so <code>N + 1<\/code> items per row, but we add a tiny percentage ( <code>0.1%<\/code>)\u2014thus one of the items wraps and we end with only <code>N<\/code> items per row. Clever, right? No more worrying about the gap!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_wvJwzbL\" src=\"\/\/codepen.io\/anon\/embed\/wvJwzbL?height=450&amp;theme-id=1&amp;slug-hash=wvJwzbL&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed wvJwzbL\" title=\"CodePen Embed wvJwzbL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Now we can control the <strong>maximum<\/strong> number of items per row which give us a <em>partial<\/em> control over the number of items per row.<\/p>\n\n\n\n<p>The same can also be applied to the CSS Grid method as well:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_BaWBLge\" src=\"\/\/codepen.io\/anon\/embed\/BaWBLge?height=450&amp;theme-id=1&amp;slug-hash=BaWBLge&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed BaWBLge\" title=\"CodePen Embed BaWBLge\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"is-style-explanation\">Note that here I have introduced <a href=\"https:\/\/css-tricks.com\/a-complete-guide-to-custom-properties\/\">custom properties<\/a> to control the different values.<\/p>\n\n\n\n<p>We\u2019re getting closer!<\/p>\n\n\n\n<ul>\n<li>&#x2714;&#xfe0f; Only one line of code<\/li>\n\n\n\n<li>&#x2714;&#xfe0f; Consistent element widths in the footer<\/li>\n\n\n\n<li>&#x26a0;&#xfe0f; Partial control of the number of items per row<\/li>\n\n\n\n<li>&#x274c; Items grow, but do not shrink<\/li>\n\n\n\n<li>&#x274c; Control when the items wrap<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-items-grow-but-do-not-shrink\">Items grow, but do not shrink<\/h3>\n\n\n<p>We noted earlier that using the grid method could lead to overflow if the base width is bigger than the container width. To overcome this we change:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">max(400px, 100%\/(N + 1) + 0.1%)<\/code><\/pre>\n\n\n\n<p>\u2026to:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">clamp(100%\/(N + 1) + 0.1%, 400px, 100%)<\/code><\/pre>\n\n\n\n<p>Breaking this down:<\/p>\n\n\n\n<ul>\n<li>When the screen width is big, <code>400px<\/code> is clamped to <code>100%\/(N + 1) + 0.1%<\/code>, maintaining our control of the maximum number of items per row.<\/li>\n\n\n\n<li>When the screen width is small, <code>400px<\/code> is clamped to <code>100%<\/code> so our items never exceed the container width.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_ZEezBGL\" src=\"\/\/codepen.io\/anon\/embed\/ZEezBGL?height=450&amp;theme-id=1&amp;slug-hash=ZEezBGL&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed ZEezBGL\" title=\"CodePen Embed ZEezBGL\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We\u2019re getting even closer!<\/p>\n\n\n\n<ul>\n<li>&#x2714;&#xfe0f; Only one line of code<\/li>\n\n\n\n<li>&#x2714;&#xfe0f; Consistent element widths in the footer<\/li>\n\n\n\n<li>&#x26a0;&#xfe0f; Partial control of the number of items per row<\/li>\n\n\n\n<li>&#x2714;&#xfe0f; Items grow and shrink<\/li>\n\n\n\n<li>&#x274c; Control when the items wrap<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-control-when-the-items-wrap\">Control when the items wrap<\/h3>\n\n\n<p>So far, we\u2019ve had no control over when elements wrap from one line to another. We don&#8217;t really know when it happens because it depends a number of things, like the base width, the gap, the container width, etc. To control this, we are going to change our last <code>clamp()<\/code> formula, from this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">clamp(100%\/(N + 1) + 0.1%, 400px, 100%)<\/code><\/pre>\n\n\n\n<p>\u2026to:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">clamp(100%\/(N + 1) + 0.1%, (400px - 100vw)*1000, 100%)<\/code><\/pre>\n\n\n\n<p>I can hear you screaming about that crazy-looking math, but bear with me. It\u2019s easier than you might think. Here\u2019s what\u2019s happening:<\/p>\n\n\n\n<ul>\n<li>When the screen width (<code>100vw<\/code>) is greater than <code>400px<\/code>, <code>(400px - 100vw)<\/code> results in a <strong>negative value,<\/strong> and it gets clamped down to <code>100%\/(N + 1) + 0.1%<\/code>, which is a positive value. This gives us <strong>N<\/strong> items per row.<\/li>\n\n\n\n<li>When the screen width (<code>100vw<\/code>)  is less than <code>400px<\/code>, <code>(400px - 100vw)<\/code> is a <strong>positive value<\/strong> and multiplied by a big value that\u2019s clamped to the <code>100%<\/code>. This results in <strong>one<\/strong> full-width element per row.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='199' src='https:\/\/videopress.com\/embed\/gqFOGuVE?cover=1&amp;loop=1&amp;muted=1&amp;persistVolume=0&amp;preloadContent=metadata&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><figcaption><a href=\"https:\/\/codepen.io\/t_afif\/pen\/BaWBQqK\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Live Demo<\/strong><\/a><\/figcaption><\/figure>\n\n\n\n<p>Hey, we made our first media query without a real media query! We are updating the number of items per row from <strong>N<\/strong> to <strong>1<\/strong> thanks to our <code>clamp()<\/code> formula. It should be noted that <code>400px<\/code> behave as a breakpoint in this case.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-what-about-from-n-items-per-row-to-m-items-per-row\">What about: from N items per row to M items per row?<\/h3>\n\n\n<p>We can totally do that by updating our container\u2019s clamped width:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">clamp(100%\/(N + 1) + 0.1%, (400px - 100vw)*1000, 100%\/(M + 1) + 0.1%)<\/code><\/pre>\n\n\n\n<p>I think you probably get the trick by now. When the screen width is bigger than <code>400px<\/code> we fall into the first rule (<code><strong>N<\/strong><\/code> items per row). When the screen width is smaller than <code>400px<\/code>, we fall into the second rule (<code><strong>M<\/strong><\/code> items per row).<\/p>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='199' src='https:\/\/videopress.com\/embed\/yFskDml5?cover=1&amp;loop=1&amp;muted=1&amp;persistVolume=0&amp;preloadContent=metadata&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><figcaption><a href=\"https:\/\/codepen.io\/t_afif\/pen\/ZEezBgo\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Live Demo<\/strong><\/a><\/figcaption><\/figure>\n\n\n\n<p>There we go! We can now control the number of items per row <em>and<\/em> when that number should change\u2014using only CSS custom properties and one CSS declaration.<\/p>\n\n\n\n<ul>\n<li>&#x2714;&#xfe0f; Only one line of code<\/li>\n\n\n\n<li>&#x2714;&#xfe0f; Consistent element widths in the footer<\/li>\n\n\n\n<li>&#x2714;&#xfe0f; Full control of the number of items per row<\/li>\n\n\n\n<li>&#x2714;&#xfe0f; Items grow and shrink<\/li>\n\n\n\n<li>&#x2714;&#xfe0f; Control when the items wrap<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-examples\">More examples!<\/h3>\n\n\n<p>Controlling the number of items between two values is good, but doing it for multiple values is even better! Let\u2019s try going <strong>from <code>N<\/code> items per row to <code>M<\/code> items per row, down to one item pre row.<\/strong><\/p>\n\n\n\n<p>Our formula becomes:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">clamp(clamp(100%\/(N + 1) + 0.1%, (W1 - 100vw)*1000,100%\/(M + 1) + 0.1%), (W2 - 100vw)*1000, 100%)<\/code><\/pre>\n\n\n\n<p>A <code>clamp()<\/code> within a <code>clamp()<\/code>? Yes, it starts to get a big lengthy and confusing but still easy to understand. Notice the <code>W1<\/code> and <code>W2<\/code> variables in there. Since we are changing the number of items per rows between three values, we need two \u201cbreakpoints\u201d (from <code>N<\/code> to <code>M<\/code>, and from <code>M<\/code> to <code>1<\/code>).<\/p>\n\n\n\n<p>Here\u2019s what\u2019s happening:<\/p>\n\n\n\n<ul>\n<li>When the screen width is smaller than <code>W2<\/code>, we clamp to <code>100%<\/code>, or <strong>one item per row<\/strong>.<\/li>\n\n\n\n<li>When the screen width is larger than <code>W2<\/code>, we clamp to the first <code>clamp()<\/code>.<\/li>\n\n\n\n<li>In that first clamp, when the screen width is smaller than <code>W1<\/code>, we clamp to <code>100%\/(M + 1) + 0.1%)<\/code>, or <strong>M items per row<\/strong>.<\/li>\n\n\n\n<li>In that first clamp, when the screen width is bigger than <code>W1<\/code>, we clamp to <code>100%\/(N + 1) + 0.1%)<\/code>, or <strong>N items per row<\/strong>.<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_xxqKgZe\" src=\"\/\/codepen.io\/anon\/embed\/xxqKgZe?height=350&amp;theme-id=1&amp;slug-hash=xxqKgZe&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed xxqKgZe\" title=\"CodePen Embed xxqKgZe\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>We made two media queries using only one CSS declaration! Not only this, but we can adjust that declaration thanks to the CSS custom properties, which means we can have different breakpoints and a different number of columns for different containers.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdWbRRE\" src=\"\/\/codepen.io\/anon\/embed\/mdWbRRE?height=500&amp;theme-id=1&amp;slug-hash=mdWbRRE&amp;default-tab=result\" height=\"500\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdWbRRE\" title=\"CodePen Embed mdWbRRE\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>How many media queries do we have in the above example? Too many to count but we will not stop there. We can have even more by nesting another <code>clamp()<\/code> to get <strong>from <code>N<\/code> columns to <code>M<\/code> columns to <code>P<\/code> columns to one column<\/strong>. (&#x1f631;)<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">clamp(\n  clamp(\n    clamp(100%\/(var(--n) + 1) + 0.1%, (var(--w1) - 100vw)*1000,\n          100%\/(var(--m) + 1) + 0.1%),(var(--w2) - 100vw)*1000,\n          100%\/(var(--p) + 1) + 0.1%),(var(--w3) - 100vw)*1000,\n          100%), 1fr))<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/responsive-clamp.png?h=172&#038;ssl=1\" alt=\"\" class=\"wp-image-357123\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/responsive-clamp.png?w=831&amp;ssl=1 831w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/responsive-clamp.png?resize=300%2C46&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/responsive-clamp.png?resize=768%2C118&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><figcaption class=\"wp-element-caption\">from <code><strong>N<\/strong><\/code> columns to <code><strong>M<\/strong><\/code> columns to <code><strong>P<\/strong><\/code> columns to <strong>1<\/strong> column<\/figcaption><\/figure>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_bGqbgYY\" src=\"\/\/codepen.io\/anon\/embed\/bGqbgYY?height=650&amp;theme-id=1&amp;slug-hash=bGqbgYY&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed bGqbgYY\" title=\"CodePen Embed bGqbgYY\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>As I mentioned at the very beginning of this article, we have a responsive layout without any single media queries while using just one CSS declaration\u2014sure, it\u2019s a lengthy declaration, but still counts as one.<\/p>\n\n\n\n<p>A small summary of what we have:<\/p>\n\n\n\n<ul>\n<li>&#x2714;&#xfe0f; Only one line of code<\/li>\n\n\n\n<li>&#x2714;&#xfe0f; Consistent element widths in the footer<\/li>\n\n\n\n<li>&#x2714;&#xfe0f; Full control of the number of items per row<\/li>\n\n\n\n<li>&#x2714;&#xfe0f; Items grow and shrink<\/li>\n\n\n\n<li>&#x2714;&#xfe0f; Control when the items wrap<\/li>\n\n\n\n<li>&#x2714;&#xfe0f; Easy to update using CSS custom properties<\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-let-s-simulate-container-queries\">Let\u2019s simulate container queries<\/h3>\n\n\n<p><a href=\"https:\/\/css-tricks.com\/a-cornucopia-of-container-queries\/\">Everyone is excited about container queries!<\/a> What makes them neat is they consider the width of the element instead of the viewport\/screen. The idea is that an element can adapt based on the width of its parent container for more fine-grain control over how elements respond to different contexts.<\/p>\n\n\n\n<p><a href=\"https:\/\/caniuse.com\/css-container-queries\" rel=\"noopener\">Container queries aren\u2019t officially supported anywhere<\/a> at the time of this writing, but we can certainly mimic them with our strategy. If we change <code>100vw<\/code> with <code>100%<\/code> throughout the code, things are based on the <code>.container<\/code> element\u2019s width instead of the viewport width. As simple as that!<\/p>\n\n\n\n<p>Resize the below containers and see the magic in play:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_gOmYmgz\" src=\"\/\/codepen.io\/anon\/embed\/gOmYmgz?height=650&amp;theme-id=1&amp;slug-hash=gOmYmgz&amp;default-tab=result\" height=\"650\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed gOmYmgz\" title=\"CodePen Embed gOmYmgz\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>The number of columns change based on the container width which means we are simulating container queries! We\u2019re basically doing that just by changing viewport units for a relative percentage value.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-more-tricks\">More tricks!<\/h3>\n\n\n<p>Now that we can control the number of columns, let\u2019s explore more tricks that allow us to create conditional CSS based on either the screen size (or the element size).<\/p>\n\n\n\n<p><strong>Conditional background color<\/strong><\/p>\n\n\n\n<p>A while ago <a href=\"https:\/\/stackoverflow.com\/q\/12251750\/8620333\" rel=\"noopener\">someone on StackOverflo<\/a><a href=\"https:\/\/stackoverflow.com\/q\/12251750\/8620333\" rel=\"noopener\">w asked<\/a> <a href=\"https:\/\/stackoverflow.com\/q\/12251750\/8620333\" rel=\"noopener\"><\/a>if it is possible to change the color of an element based on its width or height. Many said that it\u2019s impossible or that it would require a media query.<\/p>\n\n\n\n<p>But I have found a trick to do it without a media query:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">div {\n  background:\n   linear-gradient(green 0 0) 0 \/ max(0px,100px - 100%) 1px,\n   red;\n}<\/code><\/pre>\n\n\n\n<ul>\n<li>We have a linear gradient layer with a width equal to <code>max(0px,100px - 100%)<\/code> and a height equal to <code>1px<\/code>. The height doesn\u2019t really matter since the gradient repeats by default. Plus, it\u2019s a one color gradient, so any height will do the job.<\/li>\n\n\n\n<li><code>100%<\/code> refers to the element\u2019s width. If <code>100%<\/code> computes to a value bigger than <code>100px<\/code>, the <code>max()<\/code> gives us <code>0px<\/code>, which means that the gradient does not show, but the comma-separated <code>red<\/code> background does.<\/li>\n\n\n\n<li>If <code>100%<\/code> computes to a value smaller than <code>100px<\/code>, the gradient does show and we get a <code>green<\/code> background instead.<\/li>\n<\/ul>\n\n\n\n<p>In other words, we made a condition based on the width of the element compared to <code>100px<\/code>!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abyybLq\" src=\"\/\/codepen.io\/anon\/embed\/abyybLq?height=350&amp;theme-id=1&amp;slug-hash=abyybLq&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abyybLq\" title=\"CodePen Embed abyybLq\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"is-style-explanation\">This demo supports Chrome, Edge, and Firefox at the time of writing.<\/p>\n\n\n\n<p>The same logic can be based on an element\u2019s height instead by rearranging where that <code>1px<\/code> value goes: <code>1px max(0px,100px - 100%)<\/code>. We can also consider the screen dimension by using <code>vh<\/code> or <code>vw<\/code> instead of <code>%<\/code>. We can even have more than two colors by adding more gradient layers.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">div {\n  background:\n   linear-gradient(purple 0 0) 0 \/max(0px,100px - 100%) 1px,\n   linear-gradient(blue   0 0) 0 \/max(0px,300px - 100%) 1px,\n   linear-gradient(green  0 0) 0 \/max(0px,500px - 100%) 1px,\n   red;\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/conditional-background.png?h=172&#038;ssl=1\" alt=\"\" class=\"wp-image-357124\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/conditional-background.png?w=816&amp;ssl=1 816w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/conditional-background.png?resize=300%2C49&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/conditional-background.png?resize=768%2C126&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzxxzYd\" src=\"\/\/codepen.io\/anon\/embed\/YzxxzYd?height=450&amp;theme-id=1&amp;slug-hash=YzxxzYd&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzxxzYd\" title=\"CodePen Embed YzxxzYd\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-toggling-an-element-s-visibility\">Toggling an element\u2019s visibility<\/h4>\n\n\n<p>To show\/hide an element based on the screen size, we generally reach for a media query and plop a classic <code>display: none<\/code> in there. Here is another idea that simulates the same behavior, only without a media query:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">div {\n  max-width: clamp(0px, (100vw - 500px) * 1000, 100%);\n  max-height: clamp(0px, (100vw - 500px) * 1000, 1000px);\n  overflow: hidden;\n}<\/code><\/pre>\n\n\n\n<p>Based on the screen width (<code>100vw<\/code>), we either get clamped to a <code>0px<\/code> value for the <code>max-height<\/code> and <code>max-width<\/code> (meaning the element is hidden) or get clamped to <code>100%<\/code> (meaning the element is visible and never greater than full width). We\u2019re avoiding using a percentage for the <code>max-height<\/code> since it fails. That\u2019s why we\u2019re using a big pixel value (<code>1000px<\/code>).<\/p>\n\n\n\n<p>Notice how the green elements disappear on small screens:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_dyzzyga\" src=\"\/\/codepen.io\/anon\/embed\/dyzzyga?height=450&amp;theme-id=1&amp;slug-hash=dyzzyga&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed dyzzyga\" title=\"CodePen Embed dyzzyga\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>It should be noted that this method is not equivalent to the toggle of the display value. It\u2019s more of a trick to give the element 0\u00d70 dimensions, making it invisible. It may not be suitable for all cases, so use it with caution! It&#8217;s more a trick to be used with decorative elements where we won&#8217;t have accessibility issues. Chris wrote about how <a href=\"https:\/\/css-tricks.com\/hiding-content-responsibly\/\" target=\"_blank\" rel=\"noreferrer noopener\">to hide content responsibly<\/a>.<\/p>\n\n\n\n<p>It\u2019s important to note that I am using <code>0px<\/code> and not <code>0<\/code> inside <code>clamp()<\/code> and <code>max()<\/code>. The latter makes invalidates property. I won\u2019t dig into this but I have answered a <a href=\"https:\/\/stackoverflow.com\/a\/62523544\/8620333\" rel=\"noopener\">Stack Overflow question related to this quirk<\/a> if you want more detail.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-changing-the-position-of-an-element\">Changing the position of an element<\/h4>\n\n\n<p>The following trick is useful when we deal with a fixed or absolutely positioned element. The difference here is that we need to update the position based on the screen width. Like the previous trick, we still rely on <code>clamp()<\/code> and a formula that looks like this: <code>clamp(X1,(100vw - W)*1000, X2)<\/code>.<\/p>\n\n\n\n<p>Basically, we are going to switch between the <code>X1<\/code> and <code>X2<\/code> values based on the difference, <code>100vw - W<\/code>, where <code>W<\/code> is the width that simulates our breakpoint.<\/p>\n\n\n\n<p>Let\u2019s take an example. We want a div placed on the left edge (<code>top: 50%; left:0<\/code>) when the screen size is smaller than <code>400px<\/code>, and place it somewhere else (say <code>top: 10%; left: 40%<\/code>) otherwise.<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">div {\n  --c:(100vw - 400px); \/* we define our condition *\/\n  top: clamp(10%, var(--c) * -1000, 50%);\n  left: clamp(0px, var(--c) * 1000, 40%);\n}<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-video wp-block-embed is-type-video is-provider-videopress\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"VideoPress Video Player\" aria-label='VideoPress Video Player' width='500' height='200' src='https:\/\/videopress.com\/embed\/JRxOvHuI?cover=1&amp;loop=1&amp;muted=1&amp;persistVolume=0&amp;preloadContent=metadata&amp;hd=0' frameborder='0' allowfullscreen data-resize-to-parent=\"true\" allow='clipboard-write'><\/iframe><script src='https:\/\/v0.wordpress.com\/js\/next\/videopress-iframe.js?m=1674852142'><\/script>\n<\/div><figcaption><a href=\"https:\/\/codepen.io\/t_afif\/pen\/2ad61179ab77feee569a2cb5e29b9f11\" target=\"_blank\" rel=\"noreferrer noopener\"><strong>Live <\/strong><\/a><strong><a href=\"https:\/\/codepen.io\/t_afif\/pen\/ExvwVqQ\" target=\"_blank\" rel=\"noreferrer noopener\">Demo<\/a><\/strong><\/figcaption><\/figure>\n\n\n\n<p>First, I have defined the condition with a CSS custom property to avoid the repetition. Note that I also used it with the background color switching trick we saw earlier\u2014we can either use <code>(100vw - 400px)<\/code> or <code>(400px - 100vw)<\/code>, but pay attention to the calculation later as both don\u2019t have the same sign.<\/p>\n\n\n\n<p>Then, within each <code>clamp()<\/code>, we <em>always<\/em> start with the smallest value for each property. Don\u2019t incorrectly assume that we need to put the small screen value first!<\/p>\n\n\n\n<p>Finally, we define the sign for each condition. I picked <code>(100vw - 400px)<\/code>, which means that this value will be <strong>negative<\/strong> when the screen width is <strong>smaller<\/strong> than <code>400px<\/code>, and <strong>positive<\/strong> when the screen width is <strong>bigger<\/strong> than <code>400px<\/code>. If I need the smallest value of <code>clamp()<\/code> to be considered below <code>400px<\/code> then I do nothing to the sign of the condition (I keep it positive) but if I need the smallest value to be considered above <code>400px<\/code> I need to invert the sign of the condition. That\u2019s why you see <code>(100vw - 400px)*-1000<\/code> with the <code>top<\/code> property.<\/p>\n\n\n\n<p>OK, I get it. This isn\u2019t the more straightforward concept, so let\u2019s do the opposite reasoning and trace our steps to get a better idea of what we\u2019re doing.<\/p>\n\n\n\n<p>For <code>top<\/code>, we have <code>clamp(10%,(100vw - 400px)*-1000,50%)<\/code> so\u2026<\/p>\n\n\n\n<ul>\n<li>if the screen width (<code>100vw<\/code>) is smaller than <code>400px<\/code>, then the difference (<code>100vw - 400px<\/code>) is a <strong>negative<\/strong> value. We multiply it with another big negative value (<code>-1000<\/code> in this case) to get a big <strong>positive<\/strong> value that gets clamped to <code>50%<\/code>: That means we\u2019re left with <code>top: 50%<\/code> when the screen size is smaller than <code>400px<\/code>.<\/li>\n\n\n\n<li>if the screen width (<code>100vw<\/code>) is bigger than <code>400px<\/code>, we end with: <code>top: 10%<\/code> instead.<\/li>\n<\/ul>\n\n\n\n<p>The same logic applies to what we\u2019re declaring on the <code>left<\/code> property. The only difference is that we multiply with <code>1000<\/code> instead of <code>-1000<\/code> .<\/p>\n\n\n\n<p class=\"is-style-explanation\">Here\u2019s a secret: You don\u2019t really need all that math. You can experiment until you get it perfect values, but for the sake of the article, I need to explain things in a way that leads to consistent behavior.<\/p>\n\n\n\n<p>It should be noted that a trick like this works with any property that accepts length values (<code>padding<\/code>, <code>margin<\/code>, <code>border-width<\/code>, <code>translate<\/code>, etc.). We are not limited to changing the <code>position<\/code>, but other properties as well.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-demos\">Demos!<\/h3>\n\n\n<p>Most of you are probably wondering if any of these concepts are at all practical to use in a real-world use case. Let me show you a few examples that will (hopefully) convince you that they are.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-progress-bar\">Progress bar<\/h4>\n\n\n<p>The background color changing trick makes for a great progress bar or any similar element where we need to show a different color based on progression.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_YzxreRV\" src=\"\/\/codepen.io\/anon\/embed\/YzxreRV?height=450&amp;theme-id=1&amp;slug-hash=YzxreRV&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed YzxreRV\" title=\"CodePen Embed YzxreRV\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"is-style-explanation\">This demo supports Chrome, Edge, and Firefox at the time of writing.<\/p>\n\n\n\n<p>That demo is a pretty simple example where I define three ranges:<\/p>\n\n\n\n<ul>\n<li>Red: [<code>0% 30%]<\/code><\/li>\n\n\n\n<li>Orange: [<code>30% 60%]<\/code><\/li>\n\n\n\n<li>Green: [<code>60% 100%]<\/code><\/li>\n<\/ul>\n\n\n\n<p>There\u2019s no wild CSS or JavaScript to update the color. A \u201cmagic\u201d background property allows us to have a dynamic color that changes based on computed values.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-editable-content\">Editable content<\/h4>\n\n\n<p>It\u2019s common to give users a way to edit content. We can update color based on what\u2019s entered.<\/p>\n\n\n\n<p>In the following example, we get a yellow \u201cwarning\u201d when entering more than three lines of text, and a red \u201cwarning\u201d if we go above six lines. This can a way to reduce JavaScript that needs to detect the height, then add\/remove a particular class.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_eYEGVqm\" src=\"\/\/codepen.io\/anon\/embed\/eYEGVqm?height=450&amp;theme-id=1&amp;slug-hash=eYEGVqm&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed eYEGVqm\" title=\"CodePen Embed eYEGVqm\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p class=\"is-style-explanation\">This demo supports Chrome, Edge, and Firefox at the time of writing.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-timeline-layout\">Timeline layout<\/h4>\n\n\n<p>Timelines are great patterns for visualizing key moments in time. This implementation uses three tricks to get one without any media queries. One trick is updating the number of columns, another is hiding some elements on small screens, and the last one is updating the background color. Again, no media queries!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_rNzGdex\" src=\"\/\/codepen.io\/anon\/embed\/rNzGdex?height=850&amp;theme-id=1&amp;slug-hash=rNzGdex&amp;default-tab=result\" height=\"850\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed rNzGdex\" title=\"CodePen Embed rNzGdex\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>When the screen width is below <code>600px<\/code>, all of the pseudo elements are removed, changing the layout from two columns to one column. Then the color updates from a blue\/green\/green\/blue pattern to a blue\/green\/blue\/green one.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-responsive-card\">Responsive card<\/h4>\n\n\n<p>Here\u2019s a responsive card approach where CSS properties update based on the viewport size. Normally, we might expect the layout to transition from two columns on large screens to one column on small screens, where the card image is stacked either above or below the content. In this example, however, we change the position, width, height, padding, and border radius of the image to get a totally different layout where the image sits beside the card title.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_abyLYGy\" src=\"\/\/codepen.io\/anon\/embed\/abyLYGy?height=450&amp;theme-id=1&amp;slug-hash=abyLYGy&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed abyLYGy\" title=\"CodePen Embed abyLYGy\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-speech-bubbles\">Speech bubbles<\/h4>\n\n\n<p>Need some nice-looking testimonials for your product or service? These responsive speech bubbles work just about anywhere, even without media queries.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdMBZLG\" src=\"\/\/codepen.io\/anon\/embed\/mdMBZLG?height=450&amp;theme-id=1&amp;slug-hash=mdMBZLG&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdMBZLG\" title=\"CodePen Embed mdMBZLG\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-fixed-button\">Fixed button<\/h4>\n\n\n<p>You know those buttons that are sometimes fixed to the left or right edge of the screen, usually for used to link up a contact for or survey? We can have one of those on large screens, then transform it into a persistent circular button fixed to the bottom-right corner on small screens for more convenient taps.<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_mdMBvzM\" src=\"\/\/codepen.io\/anon\/embed\/mdMBvzM?height=450&amp;theme-id=1&amp;slug-hash=mdMBvzM&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed mdMBvzM\" title=\"CodePen Embed mdMBvzM\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-fixed-alert\">Fixed alert<\/h4>\n\n\n<p>One more demo, this time for something that could work for those GDPR cookie notices:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_LYjzoVP\" src=\"\/\/codepen.io\/anon\/embed\/LYjzoVP?height=450&amp;theme-id=1&amp;slug-hash=LYjzoVP&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed LYjzoVP\" title=\"CodePen Embed LYjzoVP\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-conclusion\">Conclusion<\/h3>\n\n\n<p>Media queries have been a core ingredient for responsive designs since the term <em>responsive design<\/em> was coined years ago. While they certainly aren\u2019t going anywhere, we covered a bunch of newer CSS features and concepts that allow us to rely less often on media queries for creating responsive layouts.<\/p>\n\n\n\n<p>We looked at flexbox and grid, <code>clamp()<\/code>, relative units, and combined them together to do all kinds of things, from changing the background of an element based on its container width, moving positions at certain screen sizes, and even mimicking as-of-yet-unreleased container queries. Exciting stuff! And all without one <code>@media<\/code> in the CSS.<\/p>\n\n\n\n<p>The goal here is not to get rid or replace media queries but it\u2019s more to optimize and reduce the amount of code especially that CSS has evolved a lot and now we have some powerful tool to create conditional styles. In other words, it\u2019s awesome to see the CSS feature set grow in ways that make our lives as front-enders easier while granting us superpowers to control how our designs behave like we have never had before.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We cannot talk about web development without talking about Responsive Design. It\u2019s just a given these days and has been for many years. Media queries are a part of Responsive Design and they aren\u2019t going anywhere. Since the introduction of media queries (literally decades ago), CSS has evolved to the points that there are a [&hellip;]<\/p>\n","protected":false},"author":281881,"featured_media":357085,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Great responsive flavor, zero media query calories with tons of examples from @ChallengesCss","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[14726,532,686,685,426],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/diet-css.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":342887,"url":"https:\/\/css-tricks.com\/are-we-in-a-new-era-of-web-design-what-do-we-call-it\/","url_meta":{"origin":357080,"position":0},"title":"Are we in a new era of web design? What do we call it?","date":"June 21, 2021","format":false,"excerpt":"Una is calling it the new responsive. A nod to the era we were most certainly in, the era of responsive design. Where responsive design was fluid grids, flexible media, and media queries, the new responsive is those things too, but slotted into a wider scope: user preference queries, viewport\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/06\/uAJDDUDLcAsLzBf0a27b.png?fit=1200%2C663&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":306249,"url":"https:\/\/css-tricks.com\/thinking-in-behaviors-not-screen-sizes\/","url_meta":{"origin":357080,"position":1},"title":"Thinking in Behaviors, Not Screen Sizes","date":"April 10, 2020","format":false,"excerpt":"Chase McCoy wrote a nifty post about the \u201cgap problem\u201d when making a grid of items. His argument might be summarized like this: how should we space elements with margins in CSS? He notes that the gap property isn\u2019t quite ready for prime time when it comes to using it\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/ipad-screen-size.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":339138,"url":"https:\/\/css-tricks.com\/next-gen-css-container\/","url_meta":{"origin":357080,"position":2},"title":"Next Gen CSS: @container","date":"May 11, 2021","format":false,"excerpt":"Chrome is experimenting with @container, a property within the CSS Working Group Containment Level 3 spec being championed by Miriam Suzanne of Oddbird, and a group of engineers across the web platform. @container brings us the ability to style elements based on the size of their parent container. The @container\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Screen-Shot-2021-05-11-at-7.38.01-AM.png?fit=1200%2C550&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":253471,"url":"https:\/\/css-tricks.com\/container-query-discussion\/","url_meta":{"origin":357080,"position":3},"title":"Container Query Discussion","date":"April 6, 2017","format":false,"excerpt":"Right now, we have the power to write CSS that only applies when the browser window itself is at certain widths or heights. Breakpoints, as it were. Super useful. What we don't have (natively) is the ability to write conditional CSS based on any particular elements (or \"containers\") properties. It's\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":281133,"url":"https:\/\/css-tricks.com\/algorithmic-layouts\/","url_meta":{"origin":357080,"position":4},"title":"Algorithmic Layouts","date":"January 10, 2019","format":false,"excerpt":"Don't miss this video by Heydon that digs into CSS layouts. It's great how he combines fundamental knowledge, like the way elements flow, wrap, and can have margin with new layout methods like flexbox and grid (with specific examples). Of particular note is the clear demonstration of how flexbox and\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/01\/heydon-algorithmic-layouts.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":150328,"url":"https:\/\/css-tricks.com\/responsive-elements\/","url_meta":{"origin":357080,"position":5},"title":"Responsive Elements","date":"September 17, 2013","format":false,"excerpt":"Width based media queries are based on the entire browser window. If the browser window is narrower than 800px, do this. If the browser is window is wider than 400px, do this. But that's not always enough. Imagine a desktop 3-column layout at 1000px. Each column is 333px wide. Then\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/diet-css.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357080"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/281881"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=357080"}],"version-history":[{"count":9,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357080\/revisions"}],"predecessor-version":[{"id":377500,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/357080\/revisions\/377500"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/357085"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=357080"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=357080"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=357080"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}