{"id":6587,"date":"2021-10-31T15:31:08","date_gmt":"2021-10-31T15:31:08","guid":{"rendered":"https:\/\/www.terluinwebdesign.nl\/en\/?p=6587"},"modified":"2025-07-18T14:52:29","modified_gmt":"2025-07-18T14:52:29","slug":"viewport-relative-fluid-responsive-web-design","status":"publish","type":"post","link":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/","title":{"rendered":"Viewport-relative, fluid, responsive web design"},"content":{"rendered":"<pre><prevent-autop><div class=\"row all d__content-in-narrow-container t__content-in-container m__content-in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"18430.390625\" data-cache-vw-t=\"617\" data-cache-h-t=\"15300.7265625\" data-cache-vw-m=\"462\" data-cache-h-m=\"28768.9765625\"><div class=\"col all\"><p>Viewport-relative, fluid web design is fully dependent on the viewport's width. Container-based web design is based on content inside of a fixed width, which resizes in between a couple of CSS breakpoints.<\/p><p>If you want to make use of the whole canvas, then fluid web design is the way to go. However, within fluid web design, you have the choice to mix in absolute units (<span class=\"code css-code\">px<\/span>, <span class=\"code css-code\">mm<\/span>, <span class=\"code css-code\">cm<\/span>, etc) or to only use relative units (<span class=\"code css-code\"><a href=\"#dt-percentage\">%<\/a><\/span>, <span class=\"code css-code\"><a href=\"#dt-vw\">vw<\/a><\/span>, <span class=\"code css-code\"><a href=\"#dt-vh\">vh<\/a><\/span>, <span class=\"code css-code\"><a href=\"#dt-em\">em<\/a><\/span>, etc).<\/p><p>In this article I will explain how to only use relative units to create a fully fluid, yet responsive web design.&nbsp;I will use the web design of this very website as an example.<\/p><p>A true viewport-relative, fluid web design makes for a truly <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/responsive-web-design\/\">responsive web design<\/a>.<\/p><aside class=\"row all bg-yellow__light v-center h-center c half-row-gap d__pad-top-s t__pad-top-m m__pad-top-m d__pad-bottom-s t__pad-bottom-m m__pad-bottom-m d__in-narrow-container wrap t__vertical m__vertical t__in-container m__in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"80.203125\" data-cache-vw-t=\"617\" data-cache-h-t=\"116.9375\" data-cache-vw-m=\"462\" data-cache-h-m=\"247.125\"><div class=\"col all d__mar-right-0 d__mar-bottom-0 t__mar-bottom-s m__mar-bottom-s\"><p class=\"wrap-balance anim-fade-in\"><b class=\"h6-size\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/b><\/p><\/div><div class=\"col all mar-bottom-0 w-auto\"><a class=\"button anim-fade-in bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size w-auto pad-left-s pad-right-s pad-bottom-xs pad-top-xs\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><\/aside><h2>Pros and Cons<\/h2><p>Let's start with the cons, because those are very important to know, before deciding whether to go for a viewport-relative web design or not.<\/p><h3>Cons<\/h3><h4>Zoom has no effect below a certain percentage<\/h4><p>If you zoom in on a desktop device, the viewport's CSS-width will decrease, while the actual viewport size remains the same. So, if a 1920x1080 viewport is zoomed in at 150%, then CSS will think the viewport's width is 1280 pixels wide. This will make it zoom.<\/p><p>But since the web design is viewport-relative, that doesn't do anything - unless the viewport's CSS width goes below laptop's breakpoint into tablet's breakpoint.<\/p><p>So, the user would have to zoom in to 175% on a 1920x1080 viewport to make everything larger. That would also mean that the web page shown is as shown on tablet devices.<\/p><h4>Width of images varies for every pixel a viewport's width can change<\/h4><p>In order to make images appear as sharp as possible, the image's intrinsic size should match it's rendered size, because otherwise the web browser will resize the image, which looks terrible as the browser has to do it quickly to prevent a delay in displaying images..<\/p><p>Since it is a viewport-relative web design, the width of images also change if the viewport's width changes by even 1 pixel. That's why it is important to provide the image in widths that correlate to it's rendered size as shown at common viewport widths.<\/p><p>Container-based web designs do not have this problem, since the width of images remain the same as long as the container's size doesn't change (which changes for breakpoints).<\/p><h4>Integrating third-party modules requires you to overwrite absolute units<\/h4><p>If you were to use a viewport-relative web design on a WordPress website, then it is likely that if you install a plugin for, let's say, a widget for third-party reviews, that you have to overwrite all appearances of absolute values that were applied by the plugin's CSS styling.<\/p><p>This is not such a big deal, because you will probably customize the appearance of elements added by plugins anyways. It's just made for a different web design system.<\/p><h3>Pros<\/h3><h4>Consistency across devices within the same breakpoint<\/h4><p>If you put full-width rows in a web design that used absolute units for font sizes, margins, and paddings, then it could look squished on laptops, while looking good on desktops.<\/p><p>Viewport-relative web designs look the same on devices within the same breakpoint, and only change for device categories: laptop\/desktop, tablet\/mobile landscape, and mobile.<\/p><h4>What you see is what you get<\/h4><p>Coming back to the previous point, this also means that you don't have to check whether a full-width row looks good on a laptop screen, or a smaller\/larger smartphone screen.<\/p><p>What you see on a laptop screen, is what you see on a desktop screen; <abbr title=\"What You See Is What You Get\">WYSIWYG<\/abbr>.<\/p><h4>Using the whole canvas<\/h4><p>Now, because everything looks exactly the same within the same breakpoints, you can make use of the whole viewport without worrying about how it would look on laptop screens while designing on a desktop screen.<\/p><p>You should, however, make sure that the font size is big enough for the minimum width of your breakpoints. You can always add a breakpoint in between, if necessary.<\/p><h2>What units to use?<\/h2><p>All sizes are defined by using the <a href=\"#dt-vw\">vw<\/a>-unit, except for the height of full-screen rows. Other relative units can be used as well, as long as it's suitable and relative to the viewport.<sup id=\"ref-a-1\"><a href=\"#note-a\">[a]<\/a><\/sup><\/p><dl><dt id=\"dt-vw\"><abbr title=\"Viewport width\">vw<\/abbr><\/dt><dd>Unit equal to 1% of the viewport's width.<sup id=\"ref-b-1\"><a href=\"#note-b\">[b]<\/a><\/sup><\/dd><dt id=\"dt-vh\"><abbr title=\"Viewport height\">vh<\/abbr><\/dt><dd>Unit equal to 1% of the viewport's height.<sup id=\"ref-c-1\"><a href=\"#note-c\">[c]<\/a><\/sup><\/dd><dt id=\"dt-percentage\">%<\/dt><dd>Unit equal to a 100th of an element's parent's value for the same property.<sup id=\"ref-d-1\"><a href=\"#note-d\">[d]<\/a><\/sup><sup id=\"ref-e-1\"><a href=\"#note-e\">[e]<\/a><\/sup><\/dd><dt id=\"dt-em\">em<\/dt><dd>Unit relative to 100% of an element's font-size.<\/dd><\/dl><aside class=\"row all bg-yellow__light v-center h-center c half-row-gap d__pad-top-s t__pad-top-m m__pad-top-m d__pad-bottom-s t__pad-bottom-m m__pad-bottom-m d__in-narrow-container wrap t__vertical m__vertical t__in-container m__in-container\" data-cache-vw-d=\"1512\" data-cache-h-d=\"80.203125\" data-cache-vw-t=\"617\" data-cache-h-t=\"116.9375\" data-cache-vw-m=\"462\" data-cache-h-m=\"247.125\"><div class=\"col all d__mar-right-0 d__mar-bottom-0 t__mar-bottom-s m__mar-bottom-s\"><p class=\"wrap-balance anim-fade-in\"><b class=\"h6-size\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/b><\/p><\/div><div class=\"col all mar-bottom-0 w-auto\"><a class=\"button anim-fade-in bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size w-auto pad-left-s pad-right-s pad-bottom-xs pad-top-xs\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><\/aside><h2>How does a viewport-relative web design translate to mobile viewports?<\/h2><p>Obviously, scaling a web page that is designed for a desktop screen will get tiny on a mobile screen. To make it work for smaller devices, you simply use multipliers from a certain viewport width.<\/p><p>For example, you could provide a multiplier for font-sizes and margins\/paddings:<\/p><tw-pre><code class=\"css-code\">\/* Mobile *\/\r\n@media (max-width: 575.98px) {\r\n  :root {\r\n    --fontSizeMultiplier: 4.3;\r\n    --marpadMultiplier: 3.2;\r\n  }\r\n}\r\n\r\n\/* Mobile (Landscape) &amp; Tablet *\/\r\n@media (min-width: 576px) and (max-width: 1199.98px) {\r\n  :root {\r\n    --fontSizeMultiplier: 2;\r\n    --marpadMultiplier: 2;\r\n  }\r\n}\r\n\r\n\/* Laptop &amp; Desktop *\/\r\n@media (min-width: 1200px) {\r\n  :root {\r\n    --fontSizeMultiplier: 1;\r\n    --marpadMultiplier: 1;\r\n  }\r\n}\r\n<\/code><\/tw-pre><p>Then, use those multipliers in the calculation of the font-sizes and paddings\/margins.<\/p><tw-pre><code class=\"css-code\">:root {\r\n  --vw:\t\t\t1vw;\r\n  \r\n  --marpadTiny:\t\tcalc(0.2 * var(--vw) * var(--marpadMultiplier));\r\n  --marpadSmaller:\tcalc(0.5 * var(--vw) * var(--marpadMultiplier));\r\n  --marpadSmall:\tcalc(1.3 * var(--vw) * var(--marpadMultiplier));\r\n  --marpadNormal:\tcalc(2.0 * var(--vw) * var(--marpadMultiplier));\r\n  --marpadBig:\t\tcalc(3.5 * var(--vw) * var(--marpadMultiplier));\r\n  --marpadBigger:\tcalc(6.5 * var(--vw) * var(--marpadMultiplier));\r\n  \r\n  --bodyFontSize:\tcalc(1.0 * var(--vw) * var(--fontSizeMultiplier));\r\n  --h1FontSize:\t\tcalc(2.5 * var(--vw) * var(--fontSizeMultiplier));\r\n  --h2FontSize:\t\tcalc(2.1 * var(--vw) * var(--fontSizeMultiplier));\r\n  --h3FontSize:\t\tcalc(1.8 * var(--vw) * var(--fontSizeMultiplier));\r\n  --h4FontSize:\t\tcalc(1.6 * var(--vw) * var(--fontSizeMultiplier));\r\n  --h5FontSize:\t\tcalc(1.5 * var(--vw) * var(--fontSizeMultiplier));\r\n  --h6FontSize:\t\tcalc(1.3 * var(--vw) * var(--fontSizeMultiplier));\r\n}<\/code><\/tw-pre><p>For now, all you have seen is CSS variables. This is the foundation for a flexible web design, which it is supposed to be. You will understand the power of CSS variables at the end of this article. I'll explain why I use a variable for CSS unit <code class=\"css-code\">vw<\/code> shortly after this.<\/p><p>To be honest, the CSS I just showed you, is not exactly how I wrote it for my web design. The CSS I wrote, for variables <span class=\"code css-code\">--marpadNormal<\/span> and <span class=\"code css-code\">--bodyFontSize<\/span> for example, is uglier.<\/p><tw-pre><code class=\"css-code\">:root {\r\n  --vw: calc(1vw - var(--scrollbarWidth) \/ 100);\r\n  --designedForWidth: 2560;\r\n  --marpadNormal: calc(50 \/ var(--designedForWidth) * 100 * var(--vw) * var(--horizontalMarpadMultiplier));\r\n  --bodyFontSize: calc(32 \/ var(--designedForWidth) * 100 * var(--vw) * var(--fontSizeMultiplier));\r\n}\r\n<\/code><\/tw-pre><p>Here's the deal.. I designed my website in Adobe XD on a canvas that was 2560 pixels wide. I wrote down the font sizes and used it in a calculation that divides the font size by the canvas size (2560px) and multiplies that by the viewport width.<\/p><p>That was easier for me, as I could just write down the font size and I didn't have to calculate what the <span class=\"code css-code\">vw<\/span>-value had to be. If you think it's ugly, I completely agree with you. That's why I will use <span class=\"code css-code\">vw<\/span>-units in this article instead.<\/p><p>Also, here is the CSS-reset I've used:<\/p><tw-pre><code class=\"css-code\">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}body{line-height:1}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'\"';font-style:normal}q:after{content:'\"';font-style:normal}textarea,input[type=\"text\"],input[type=\"button\"],input[type=\"submit\"],input[type=\"reset\"],input[type=\"search\"],input[type=\"password\"]{-webkit-appearance:none;appearance:none;border-radius:0}table{border-collapse:collapse;border-spacing:0}th,td{padding:var(--marpadSmallV) var(--marpadSmall)}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:var(--marpadSmaller)}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}\r\n<\/code><\/tw-pre><h2>Excluding scrollbar from viewport width<\/h2><p>Unfortunately, the scrollbar is part of the viewport's width. This means that if the scrollbar is 500 pixels wide (for example's sake), that there is less available horizontal space within the document as opposed to if the scrollbar were 17 pixels wide.<\/p><p>Of course, no scrollbar will be 500 pixels wide. Default scrollbars vary from 12 pixels to 17 pixels wide for different browsers. Google Chrome's default scrollbar is 17 pixels wide.<\/p><h3>CSS 100vw minus scrollbar width<\/h3><p>There is no pure CSS solution for this, unfortunately. A little bit of JavaScript is required in order to calculate <span class=\"CSS\">100vw<\/span> minus the scrollbar's width. Place the following inline JavaScript code all the way up in the <code>&lt;head&gt;<\/code>:<\/p><tw-pre><code class=\"js-code\">var scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;\r\nif(scrollbarWidth &gt; 0) {\r\n  document.documentElement.style.setProperty (\r\n    '--scrollbarWidth',\r\n    scrollbarWidth + 'px'\r\n  );\r\n}<\/code><\/tw-pre><p>Now, add the following inline CSS to the <code>&lt;html&gt;<\/code>-element:<\/p><tw-pre><code class=\"INLINE-CSS-CODE\">min-height: 101vh;\r\n--scrollbarWidth: 0px;<\/code><\/tw-pre><p>The CSS above forces the <code>&lt;html&gt;<\/code>-element to show a scrollbar. The JavaScript calculates the scrollbar's width and puts the width as the value for CSS variable <code class=\"css-code\">--scrollbarWidth<\/code>.<\/p><p>You can now use variable <code class=\"css-code\">--scrollbarWidth<\/code> to override the default use of the <code class=\"css-code\">vw<\/code>-unit by turning it into a CSS variable called <code class=\"css-code\">--vw<\/code>. You might have come accross this CSS variable a little earlier in this article and might have wondered why. Well now you know!<\/p><h2>Using flexbox for layout<\/h2><p>If you want flexibility in your web design, then I suggest using flexbox layout techniques.<\/p><h3>Building layout components<\/h3><p>To create layouts, you need rows, columns and some utility classes to control the layout for different devices. Simple as that. So here's how.<\/p><tw-pre><code class=\"css-code\">:root {\r\n  --defaultFlexDirection: row;\r\n  --defaultFlexDirectionVertical: column;\r\n  --defaultFlexDirectionReverse: row-reverse;\r\n  --defaultFlexDirectionVerticalReverse: column-reverse;\r\n  \r\n  --containerWidth: calc(87.3 * var(--vw));\r\n}\r\n\r\n\/* Mobile *\/\r\n@media (max-width: 575.98px) {\r\n  :root {\r\n    --containerWidth: calc(100 * var(--vw));\r\n  }\r\n}\r\n\r\nbody {\r\n  font-size: var(--bodyFontSize);\r\n  background-color: white;\r\n}\r\n.col {\r\n  padding: var(--marpadNormal);\r\n  flex-grow: 1;\r\n  flex-basis: 0px;\r\n}\r\n.col .col {\r\n  padding: 0px;\r\n}\r\n\r\n\r\n\r\n.row {\r\n  display: flex;\r\n  width: 100%;\r\n  \r\n  --flexDirection: var(--defaultFlexDirection);\r\n  --flexDirectionVertical: var(--defaultFlexDirectionVertical);\r\n  \r\n  flex-direction: var(--flexDirection);\r\n}\r\n\r\n.row.in-container {\r\n  width: 100%;\r\n  padding-left: calc((100% - var(--containerWidth)) \/ 2);\r\n  padding-right: calc((100% - var(--containerWidth)) \/ 2);\r\n  \r\n  margin-top: var(--marpadBig);\r\n}\r\n\r\n\r\n.row.reverse-order {\r\n  --flexDirection: var(--defaultFlexDirectionReverse);\r\n  --flexDirectionVertical: var(--defaultFlexDirectionVerticalReverse);\r\n}\r\n.row.vertical {\r\n  flex-direction: var(--flexDirectionVertical);\r\n}\r\n\r\n[class*='\/\/'] {\r\n  flex-grow: 0;\r\n  width: calc(var(--a) \/ var(--b) * 100%);\r\n  min-width: calc(var(--a) \/ var(--b) * 100%);\r\n  max-width: calc(var(--a) \/ var(--b) * 100%);\r\n  flex-basis: calc(var(--a) \/ var(--b) * 100%);\r\n}\r\n\r\n[class*='w-1\/\/'] {\r\n  --a: 1;\r\n}\r\n[class*='w-2\/\/'] {\r\n  --a: 2;\r\n}\r\n[class*='w-3\/\/'] {\r\n  --a: 3;\r\n}\r\n[class*='w-4\/\/'] {\r\n  --a: 4;\r\n}\r\n[class*='w-5\/\/'] {\r\n  --a: 5;\r\n}\r\n[class*='w-6\/\/'] {\r\n  --a: 6;\r\n}\r\n[class*='w-7\/\/'] {\r\n  --a: 7;\r\n}\r\n[class*='w-8\/\/'] {\r\n  --a: 8;\r\n}\r\n[class*='w-9\/\/'] {\r\n  --a: 9;\r\n}\r\n[class*='w-10\/\/'] {\r\n  --a: 10;\r\n}\r\n[class*='w-11\/\/'] {\r\n  --a: 11;\r\n}\r\n[class*='w-12\/\/'] {\r\n  --a: 12;\r\n}\r\n\r\n[class*='\/\/1'] {\r\n  --b: 1;\r\n}\r\n[class*='\/\/2'] {\r\n  --b: 2;\r\n}\r\n[class*='\/\/3'] {\r\n  --b: 3;\r\n}\r\n[class*='\/\/4'] {\r\n  --b: 4;\r\n}\r\n[class*='\/\/5'] {\r\n  --b: 5;\r\n}\r\n[class*='\/\/6'] {\r\n  --b: 6;\r\n}\r\n[class*='\/\/7'] {\r\n  --b: 7;\r\n}\r\n[class*='\/\/8'] {\r\n  --b: 8;\r\n}\r\n[class*='\/\/9'] {\r\n  --b: 9;\r\n}\r\n[class*='\/\/10'] {\r\n  --b: 10;\r\n}\r\n[class*='\/\/11'] {\r\n  --b: 11;\r\n}\r\n[class*='\/\/12'] {\r\n  --b: 12;\r\n}\r\n\r\n@media (max-width: 575.98px) {\r\n  .row.in-container_mobile {\r\n    width: 100%;\r\n    padding-left: calc((100% - var(--containerWidth)) \/ 2);\r\n    padding-right: calc((100% - var(--containerWidth)) \/ 2);\r\n    \r\n    margin-top: var(--marpadBig);\r\n  }\r\n  .row.reverse-order_mobile {\r\n    --flexDirection: var(--defaultFlexDirectionReverse);\r\n    --flexDirectionVertical: var(--defaultFlexDirectionVerticalReverse);\r\n  }\r\n  .row.vertical_mobile {\r\n    flex-direction: var(--flexDirectionVertical);\r\n  }\r\n  .row:not(.vertical):not(.vertical_mobile) {\r\n    align-items: flex-start;\r\n  }\r\n  \r\n  \r\n  .row.gap:not(.vertical):not(.vertical_mobile):not(.reverse-order):not(.reverse-order_mobile) &gt; .col:not(:last-child),\r\n  .row.gap_mobile:not(.vertical):not(.vertical_mobile):not(.reverse-order):not(.reverse-order_mobile) &gt; .col:not(:last-child) {\r\n    margin-right: var(--marpadNormal);\r\n  }\r\n  .row.gap.vertical:not(.reverse-order):not(.reverse-order_mobile) &gt; .col:not(:last-child),\r\n  .row.gap.vertical_mobile:not(.reverse-order):not(.reverse-order_mobile) &gt; .col:not(:last-child),\r\n  .row.gap_mobile.vertical:not(.reverse-order):not(.reverse-order_mobile) &gt; .col:not(:last-child),\r\n  .row.gap_mobile.vertical_mobile:not(.reverse-order):not(.reverse-order_mobile) &gt; .col:not(:last-child) {\r\n    margin-bottom: var(--marpadNormal);\r\n  }\r\n  \r\n  .row.gap:not(.vertical):not(.vertical_mobile).reverse-order &gt; .col:not(:first-child),\r\n  .row.gap:not(.vertical):not(.vertical_mobile).reverse-order_mobile &gt; .col:not(:first-child),\r\n  .row.gap_mobile:not(.vertical):not(.vertical_mobile).reverse-order &gt; .col:not(:first-child),\r\n  .row.gap_mobile:not(.vertical):not(.vertical_mobile).reverse-order_mobile &gt; .col:not(:first-child) {\r\n    margin-right: var(--marpadNormal);\r\n  }\r\n  .row.gap.vertical.reverse-order &gt; .col:not(:first-child),\r\n  .row.gap.vertical.reverse-order_mobile &gt; .col:not(:first-child),\r\n  .row.gap.vertical_mobile.reverse-order &gt; .col:not(:first-child),\r\n  .row.gap.vertical_mobile.reverse-order_mobile &gt; .col:not(:first-child),\r\n  .row.gap_mobile.vertical.reverse-order &gt; .col:not(:first-child),\r\n  .row.gap_mobile.vertical.reverse-order_mobile &gt; .col:not(:first-child),\r\n  .row.gap_mobile.vertical_mobile.reverse-order &gt; .col:not(:first-child),\r\n  .row.gap_mobile.vertical_mobile.reverse-order_mobile &gt; .col:not(:first-child) {\r\n    margin-bottom: var(--marpadNormal);\r\n  }\r\n  \r\n  [class*='\/m\/'] {\r\n    flex-grow: 0;\r\n    width: calc(var(--a) \/ var(--b) * 100%);\r\n    min-width: calc(var(--a) \/ var(--b) * 100%);\r\n    max-width: calc(var(--a) \/ var(--b) * 100%);\r\n    flex-basis: calc(var(--a) \/ var(--b) * 100%);\r\n  }\r\n  \r\n  [class*='w-1\/m\/'] {\r\n    --a: 1;\r\n  }\r\n  [class*='w-2\/m\/'] {\r\n    --a: 2;\r\n  }\r\n  [class*='w-3\/m\/'] {\r\n    --a: 3;\r\n  }\r\n  [class*='w-4\/m\/'] {\r\n    --a: 4;\r\n  }\r\n  [class*='w-5\/m\/'] {\r\n    --a: 5;\r\n  }\r\n  [class*='w-6\/m\/'] {\r\n    --a: 6;\r\n  }\r\n  [class*='w-7\/m\/'] {\r\n    --a: 7;\r\n  }\r\n  [class*='w-8\/m\/'] {\r\n    --a: 8;\r\n  }\r\n  [class*='w-9\/m\/'] {\r\n    --a: 9;\r\n  }\r\n  [class*='w-10\/m\/'] {\r\n    --a: 10;\r\n  }\r\n  [class*='w-11\/m\/'] {\r\n    --a: 11;\r\n  }\r\n  [class*='w-12\/m\/'] {\r\n    --a: 12;\r\n  }\r\n  \r\n  [class*='\/m\/1'] {\r\n    --b: 1;\r\n  }\r\n  [class*='\/m\/2'] {\r\n    --b: 2;\r\n  }\r\n  [class*='\/m\/3'] {\r\n    --b: 3;\r\n  }\r\n  [class*='\/m\/4'] {\r\n    --b: 4;\r\n  }\r\n  [class*='\/m\/5'] {\r\n    --b: 5;\r\n  }\r\n  [class*='\/m\/6'] {\r\n    --b: 6;\r\n  }\r\n  [class*='\/m\/7'] {\r\n    --b: 7;\r\n  }\r\n  [class*='\/m\/8'] {\r\n    --b: 8;\r\n  }\r\n  [class*='\/m\/9'] {\r\n    --b: 9;\r\n  }\r\n  [class*='\/m\/10'] {\r\n    --b: 10;\r\n  }\r\n  [class*='\/m\/11'] {\r\n    --b: 11;\r\n  }\r\n  [class*='\/m\/12'] {\r\n    --b: 12;\r\n  }\r\n}\r\n\r\n@media (min-width: 576px) and (max-width: 1199.98px) {\r\n  .row.in-container_tablet {\r\n    width: 100%;\r\n    padding-left: calc((100% - var(--containerWidth)) \/ 2);\r\n    padding-right: calc((100% - var(--containerWidth)) \/ 2);\r\n    \r\n    margin-top: var(--marpadBig);\r\n  }\r\n  .row.reverse-order_tablet {\r\n    --flexDirection: var(--defaultFlexDirectionReverse);\r\n    --flexDirectionVertical: var(--defaultFlexDirectionVerticalReverse);\r\n  }\r\n  .row.vertical_tablet {\r\n    flex-direction: var(--flexDirectionVertical);\r\n  }\r\n  .row:not(.vertical):not(.vertical_tablet) {\r\n    align-items: flex-start;\r\n  }\r\n  \r\n  \r\n  .row.gap:not(.vertical):not(.vertical_tablet):not(.reverse-order):not(.reverse-order_tablet) &gt; .col:not(:last-child),\r\n  .row.gap_tablet:not(.vertical):not(.vertical_tablet):not(.reverse-order):not(.reverse-order_tablet) &gt; .col:not(:last-child) {\r\n    margin-right: var(--marpadNormal);\r\n  }\r\n  .row.gap.vertical:not(.reverse-order):not(.reverse-order_tablet) &gt; .col:not(:last-child),\r\n  .row.gap.vertical_tablet:not(.reverse-order):not(.reverse-order_tablet) &gt; .col:not(:last-child),\r\n  .row.gap_tablet.vertical:not(.reverse-order):not(.reverse-order_tablet) &gt; .col:not(:last-child),\r\n  .row.gap_tablet.vertical_tablet:not(.reverse-order):not(.reverse-order_tablet) &gt; .col:not(:last-child) {\r\n    margin-bottom: var(--marpadNormal);\r\n  }\r\n  \r\n  .row.gap:not(.vertical):not(.vertical_tablet).reverse-order &gt; .col:not(:first-child),\r\n  .row.gap:not(.vertical):not(.vertical_tablet).reverse-order_tablet &gt; .col:not(:first-child),\r\n  .row.gap_tablet:not(.vertical):not(.vertical_tablet).reverse-order &gt; .col:not(:first-child),\r\n  .row.gap_tablet:not(.vertical):not(.vertical_tablet).reverse-order_tablet &gt; .col:not(:first-child) {\r\n    margin-right: var(--marpadNormal);\r\n  }\r\n  .row.gap.vertical.reverse-order &gt; .col:not(:first-child),\r\n  .row.gap.vertical.reverse-order_tablet &gt; .col:not(:first-child),\r\n  .row.gap.vertical_tablet.reverse-order &gt; .col:not(:first-child),\r\n  .row.gap.vertical_tablet.reverse-order_tablet &gt; .col:not(:first-child),\r\n  .row.gap_tablet.vertical.reverse-order &gt; .col:not(:first-child),\r\n  .row.gap_tablet.vertical.reverse-order_tablet &gt; .col:not(:first-child),\r\n  .row.gap_tablet.vertical_tablet.reverse-order &gt; .col:not(:first-child),\r\n  .row.gap_tablet.vertical_tablet.reverse-order_tablet &gt; .col:not(:first-child) {\r\n    margin-bottom: var(--marpadNormal);\r\n  }\r\n  \r\n  [class*='\/t\/'] {\r\n    flex-grow: 0;\r\n    width: calc(var(--a) \/ var(--b) * 100%);\r\n    min-width: calc(var(--a) \/ var(--b) * 100%);\r\n    max-width: calc(var(--a) \/ var(--b) * 100%);\r\n    flex-basis: calc(var(--a) \/ var(--b) * 100%);\r\n  }\r\n  \r\n  [class*='w-1\/t\/'] {\r\n    --a: 1;\r\n  }\r\n  [class*='w-2\/t\/'] {\r\n    --a: 2;\r\n  }\r\n  [class*='w-3\/t\/'] {\r\n    --a: 3;\r\n  }\r\n  [class*='w-4\/t\/'] {\r\n    --a: 4;\r\n  }\r\n  [class*='w-5\/t\/'] {\r\n    --a: 5;\r\n  }\r\n  [class*='w-6\/t\/'] {\r\n    --a: 6;\r\n  }\r\n  [class*='w-7\/t\/'] {\r\n    --a: 7;\r\n  }\r\n  [class*='w-8\/t\/'] {\r\n    --a: 8;\r\n  }\r\n  [class*='w-9\/t\/'] {\r\n    --a: 9;\r\n  }\r\n  [class*='w-10\/t\/'] {\r\n    --a: 10;\r\n  }\r\n  [class*='w-11\/t\/'] {\r\n    --a: 11;\r\n  }\r\n  [class*='w-12\/t\/'] {\r\n    --a: 12;\r\n  }\r\n  \r\n  [class*='\/t\/1'] {\r\n    --b: 1;\r\n  }\r\n  [class*='\/t\/2'] {\r\n    --b: 2;\r\n  }\r\n  [class*='\/t\/3'] {\r\n    --b: 3;\r\n  }\r\n  [class*='\/t\/4'] {\r\n    --b: 4;\r\n  }\r\n  [class*='\/t\/5'] {\r\n    --b: 5;\r\n  }\r\n  [class*='\/t\/6'] {\r\n    --b: 6;\r\n  }\r\n  [class*='\/t\/7'] {\r\n    --b: 7;\r\n  }\r\n  [class*='\/t\/8'] {\r\n    --b: 8;\r\n  }\r\n  [class*='\/t\/9'] {\r\n    --b: 9;\r\n  }\r\n  [class*='\/t\/10'] {\r\n    --b: 10;\r\n  }\r\n  [class*='\/t\/11'] {\r\n    --b: 11;\r\n  }\r\n  [class*='\/t\/12'] {\r\n    --b: 12;\r\n  }\r\n}\r\n\r\n@media (min-width: 1200px) {\r\n  .row.in-container_mobile {\r\n    width: 100%;\r\n    padding-left: calc((100% - var(--containerWidth)) \/ 2);\r\n    padding-right: calc((100% - var(--containerWidth)) \/ 2);\r\n    \r\n    margin-top: var(--marpadBig);\r\n  }\r\n  .row.reverse-order_desktop {\r\n    --flexDirection: var(--defaultFlexDirectionReverse);\r\n    --flexDirectionVertical: var(--defaultFlexDirectionVerticalReverse);\r\n  }\r\n  .row.vertical_desktop {\r\n    flex-direction: var(--flexDirectionVertical);\r\n  }\r\n  .row:not(.vertical):not(.vertical_desktop) {\r\n    align-items: flex-start;\r\n  }\r\n  \r\n  \r\n  .row.gap:not(.vertical):not(.vertical_desktop):not(.reverse-order):not(.reverse-order_desktop) &gt; .col:not(:last-child),\r\n  .row.gap_desktop:not(.vertical):not(.vertical_desktop):not(.reverse-order):not(.reverse-order_desktop) &gt; .col:not(:last-child) {\r\n    margin-right: var(--marpadNormal);\r\n  }\r\n  .row.gap.vertical:not(.reverse-order):not(.reverse-order_desktop) &gt; .col:not(:last-child),\r\n  .row.gap.vertical_desktop:not(.reverse-order):not(.reverse-order_desktop) &gt; .col:not(:last-child),\r\n  .row.gap_desktop.vertical:not(.reverse-order):not(.reverse-order_desktop) &gt; .col:not(:last-child),\r\n  .row.gap_desktop.vertical_desktop:not(.reverse-order):not(.reverse-order_desktop) &gt; .col:not(:last-child) {\r\n    margin-bottom: var(--marpadNormal);\r\n  }\r\n  \r\n  .row.gap:not(.vertical):not(.vertical_desktop).reverse-order &gt; .col:not(:first-child),\r\n  .row.gap:not(.vertical):not(.vertical_desktop).reverse-order_desktop &gt; .col:not(:first-child),\r\n  .row.gap_desktop:not(.vertical):not(.vertical_desktop).reverse-order &gt; .col:not(:first-child),\r\n  .row.gap_desktop:not(.vertical):not(.vertical_desktop).reverse-order_desktop &gt; .col:not(:first-child) {\r\n    margin-right: var(--marpadNormal);\r\n  }\r\n  .row.gap.vertical.reverse-order &gt; .col:not(:first-child),\r\n  .row.gap.vertical.reverse-order_desktop &gt; .col:not(:first-child),\r\n  .row.gap.vertical_desktop.reverse-order &gt; .col:not(:first-child),\r\n  .row.gap.vertical_desktop.reverse-order_desktop &gt; .col:not(:first-child),\r\n  .row.gap_desktop.vertical.reverse-order &gt; .col:not(:first-child),\r\n  .row.gap_desktop.vertical.reverse-order_desktop &gt; .col:not(:first-child),\r\n  .row.gap_desktop.vertical_desktop.reverse-order &gt; .col:not(:first-child),\r\n  .row.gap_desktop.vertical_desktop.reverse-order_desktop &gt; .col:not(:first-child) {\r\n    margin-bottom: var(--marpadNormal);\r\n  }\r\n  \r\n  [class*='\/d\/'] {\r\n    flex-grow: 0;\r\n    width: calc(var(--a) \/ var(--b) * 100%);\r\n    min-width: calc(var(--a) \/ var(--b) * 100%);\r\n    max-width: calc(var(--a) \/ var(--b) * 100%);\r\n    flex-basis: calc(var(--a) \/ var(--b) * 100%);\r\n  }\r\n  \r\n  [class*='w-1\/d\/'] {\r\n    --a: 1;\r\n  }\r\n  [class*='w-2\/d\/'] {\r\n    --a: 2;\r\n  }\r\n  [class*='w-3\/d\/'] {\r\n    --a: 3;\r\n  }\r\n  [class*='w-4\/d\/'] {\r\n    --a: 4;\r\n  }\r\n  [class*='w-5\/d\/'] {\r\n    --a: 5;\r\n  }\r\n  [class*='w-6\/d\/'] {\r\n    --a: 6;\r\n  }\r\n  [class*='w-7\/d\/'] {\r\n    --a: 7;\r\n  }\r\n  [class*='w-8\/d\/'] {\r\n    --a: 8;\r\n  }\r\n  [class*='w-9\/d\/'] {\r\n    --a: 9;\r\n  }\r\n  [class*='w-10\/d\/'] {\r\n    --a: 10;\r\n  }\r\n  [class*='w-11\/d\/'] {\r\n    --a: 11;\r\n  }\r\n  [class*='w-12\/d\/'] {\r\n    --a: 12;\r\n  }\r\n  \r\n  [class*='\/d\/1'] {\r\n    --b: 1;\r\n  }\r\n  [class*='\/d\/2'] {\r\n    --b: 2;\r\n  }\r\n  [class*='\/d\/3'] {\r\n    --b: 3;\r\n  }\r\n  [class*='\/d\/4'] {\r\n    --b: 4;\r\n  }\r\n  [class*='\/d\/5'] {\r\n    --b: 5;\r\n  }\r\n  [class*='\/d\/6'] {\r\n    --b: 6;\r\n  }\r\n  [class*='\/d\/7'] {\r\n    --b: 7;\r\n  }\r\n  [class*='\/d\/8'] {\r\n    --b: 8;\r\n  }\r\n  [class*='\/d\/9'] {\r\n    --b: 9;\r\n  }\r\n  [class*='\/d\/10'] {\r\n    --b: 10;\r\n  }\r\n  [class*='\/d\/11'] {\r\n    --b: 11;\r\n  }\r\n  [class*='\/d\/12'] {\r\n    --b: 12;\r\n  }\r\n}<\/code><\/tw-pre><p>The CSS shown above contains styling for rows, columns, body text, headings, paragraphs, links, and images. It also provides utility classes to control the layout:<\/p><ul><li>Direction: horizontal\/vertical (<span class=\"code css-code\">.vertical<\/span>, <span class=\"code css-code\">.vertical_mobile<\/span>, ...)<\/li><li>Reverse direction: horizontal\/vertical (<span class=\"code css-code\">.reverse-order<\/span>, <span class=\"code css-code\">.reverse-order_mobile<\/span>, ...)<\/li><li>Gap between columns (<span class=\"code css-code\">.gap<\/span>, <span class=\"code css-code\">.gap_mobile<\/span>, ...)<\/li><li>Content width of the row (<span class=\"code css-code\">.in-container<\/span>, <span class=\"code css-code\">.in-container_mobile<\/span>, ...)<\/li><li>Width of column: <span class=\"code css-code\">w-(a)\/(device)\/(b)<\/span>, for instance: <span class=\"code css-code\">w-2\/t\/3<\/span> = 66.67%<\/li><\/ul><p>To create a decent demo, you need some styling as well.<\/p><tw-pre><code class=\"css-code\">body {\r\n  line-height: 1.5;\r\n  font-family: Arial;\r\n}\r\nh1, h2, h3, h4, h5, h6 {\r\n  margin-bottom: var(--marpadSmall);\r\n  line-height: 1.2;\r\n  font-family: Arial;\r\n}\r\nh1 {\r\n  font-size: var(--h1FontSize);\r\n}\r\nh2 {\r\n  font-size: var(--h2FontSize);\r\n}\r\nh3 {\r\n  font-size: var(--h3FontSize);\r\n}\r\nh4 {\r\n  font-size: var(--h4FontSize);\r\n}\r\nh5 {\r\n  font-size: var(--h5FontSize);\r\n}\r\nh6 {\r\n  font-size: var(--h6FontSize);\r\n}\r\n\r\np:not(:last-child) {\r\n  margin-bottom: var(--marpadSmall);\r\n}\r\n\r\na {\r\n  color: blue;\r\n}\r\n\r\nimg {\r\n  display: block;\r\n  width: 100%;\r\n  max-width: 100%;\r\n  height: auto;\r\n}\r\n\r\nimg + p {\r\n  margin-top: var(--marpadSmall);\r\n}\r\n\r\n\r\n.bg-whitesmoke {\r\n  background-color: whitesmoke;\r\n}\r\n.bg-honeydew {\r\n  background-color: honeydew;\r\n}<\/code><\/tw-pre><p>I have created a demo for you: <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/demo-file-viewport-relative-fluid-responsive-web-design.html\" target=\"_blank\" rel=\"noopener nofollow\">Demo - Viewport-relative, fluid, responsive web design<\/a>.<\/p><p>If you want to add more flexibility, like <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/css\/order-items-with-css-on-specific-devices\/\" target=\"_blank\" rel=\"noopener\">reordering columns at different devices<\/a>, then be sure to take a look around in the posts I wrote about <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/css\/\" target=\"_blank\" rel=\"noopener\">unique CSS solutions<\/a>.<\/p><h2>Notes<\/h2><ol type=\"a\" class=\"semi-small\"><li id=\"note-a\"><a href=\"#ref-a-1\"><strong>^<\/strong><\/a> When using the&nbsp;<a href=\"#dt-em\">em unit<\/a>, the font size that it's relative to, should be relative to the viewport.<\/li><li id=\"note-b\"><a href=\"#ref-b-1\"><strong>^<\/strong><\/a> Scrollbars do not affect the viewport's width, so the <a href=\"#dt-vw\">vw unit<\/a> is not suitable for making sections take up the full width of the body, while inside a scroll container.<\/li><li id=\"note-c\"><a href=\"#ref-c-1\"><strong>^<\/strong><\/a> On desktop devices, the toolbar and anything else that is part of the operating system and web browser, are not part of the viewport's height and not part of the <a href=\"#dt-vh\">vh unit<\/a>. On mobile devices, the toolbar is still part of the viewport's height. The latter creates a problem for if you want to use full-screen sections on a mobile device.<\/li><li id=\"note-d\"><a href=\"#ref-d-1\"><strong>^<\/strong><\/a> Often the <a href=\"#dt-percentage\">percentage unit (%)<\/a> is relative to the value of the same property of an element's parent, like for the width or height. However, there are exceptions to this:<ul><li>Percentage units used for all properties of&nbsp;<code>padding<\/code> and <code>margin<\/code> are relative to the <strong>width<\/strong> of the parent element; even for properties controlling vertical spacing: <code>padding-top<\/code>, <code>padding-bottom<\/code>, <code>margin-top<\/code>, and <code>margin-bottom<\/code>.<\/li><\/ul><\/li><li id=\"note-e\"><a href=\"#ref-e-1\"><strong>^<\/strong><\/a> Not all properties that use numeric values can use the <a href=\"#dt-percentage\">percentage unit (%)<\/a>, as for some it may not make sense to refer to the parent's value for the same property. For instance, there is no useful default value for <code>letter-spacing<\/code>, as the value supplied for this property (which is 0 by default) is added on top of the font's default letter spacing.<\/li><\/ol><\/div><\/div><aside class=\"row all t__content-in-container m__content-in-container d__in-container v-center bg-yellow__light m__vertical color-scheme-light__dark bg-yellow__dark t__vertical t__h-center t__c m__c\" data-cache-vw-d=\"1512\" data-cache-h-d=\"318.53125\" data-cache-vw-t=\"617\" data-cache-h-t=\"836.5546875\" data-cache-vw-m=\"462\" data-cache-h-m=\"870.9609375\"><div class=\"col all w-1\/d\/3 w-10\/t\/13\"><h2 class=\"t__h1 wrap-balance anim-fade-in\">Professional AI-built website, no setup costs, for only \u20ac49\/month<\/h2><a class=\"button bor-pitch-black__light txt-pitch-black-hover__light bg-transparent-hover__light bor-pitch-black-hover__light bg-pitch-black__light txt-yellow__light bg-pitch-black__dark txt-yellow__dark bor-pitch-black__dark bg-transparent-hover__dark txt-pitch-black-hover__dark bor-pitch-black-hover__dark d__h6-size t__h6-size\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/ai-website-builder\/\"><span>AI Site Builder<\/span><\/a><\/div><div class=\"col all\"><div class=\"row all m__vertical t__vertical\"><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/website-builder-ai-bizbuilder-homepage.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3020\" height=\"1645\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/website-builder-ai-bizbuilder-homepage-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"193.453125\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"272.796875\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"219.4921875\" data-img-of-m=\"fill\"><\/div><div class=\"col all\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/uploads\/2025\/07\/bizbuilder-dienst-pagina-desktop.png\" class=\"anim-fade-in\" data-src-light=\"\" data-src-dark=\"\" title=\"\" alt=\"\" width=\"3840\" height=\"2160\" srcset=\"https:\/\/www.terluinwebdesign.nl\/wp-content\/plugins\/tw-builder\/access\/img\/tmp\/2025\/07\/bizbuilder-dienst-pagina-desktop-w512.png.webp\" data-img-vw-d=\"1512\" data-img-w-d=\"356.2890625\" data-img-h-d=\"200.40625\" data-img-of-d=\"fill\" data-img-vw-t=\"617\" data-img-w-t=\"502.421875\" data-img-h-t=\"282.609375\" data-img-of-t=\"fill\" data-img-vw-m=\"462\" data-img-w-m=\"404.25\" data-img-h-m=\"227.390625\" data-img-of-m=\"fill\"><\/div><\/div><\/div><\/aside><\/prevent-autop><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Viewport-relative, fluid web design is fully dependent on the viewport&#8217;s width. Container-based web design is based on content inside of a fixed width, which resizes in between a couple of CSS breakpoints.If you want to make use of the whole canvas, then fluid web design is the way to go. However, within fluid web design, <a href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/\" class=\"read-more-link block\">Read more<\/a><\/p>\n","protected":false},"author":2,"featured_media":6658,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,56],"tags":[],"class_list":["post-6587","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Viewport-relative, fluid, responsive web design - Pros and Cons &amp; Demo<\/title>\n<meta name=\"description\" content=\"Learn how to build a viewport-relative, fluid, responsive web design using CSS. Information on the pros and cons of such a web design system.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Viewport-relative, fluid, responsive web design - Pros and Cons &amp; Demo\" \/>\n<meta property=\"og:description\" content=\"Learn how to build a viewport-relative, fluid, responsive web design using CSS. Information on the pros and cons of such a web design system.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/\" \/>\n<meta property=\"og:site_name\" content=\"Terluin Webdesign\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/TerluinWebdesign\/\" \/>\n<meta property=\"article:published_time\" content=\"2021-10-31T15:31:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-07-18T14:52:29+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-viewport-relative-fluid-responsive-web-design.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"676\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thijs Terluin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:site\" content=\"@terluinwdesign\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Thijs Terluin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"18 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/\"},\"author\":{\"name\":\"Thijs Terluin\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\"},\"headline\":\"Viewport-relative, fluid, responsive web design\",\"datePublished\":\"2021-10-31T15:31:08+00:00\",\"dateModified\":\"2025-07-18T14:52:29+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/\"},\"wordCount\":5,\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-viewport-relative-fluid-responsive-web-design.png\",\"articleSection\":[\"Blog\",\"CSS\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/\",\"name\":\"Viewport-relative, fluid, responsive web design - Pros and Cons & Demo\",\"isPartOf\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-viewport-relative-fluid-responsive-web-design.png\",\"datePublished\":\"2021-10-31T15:31:08+00:00\",\"dateModified\":\"2025-07-18T14:52:29+00:00\",\"description\":\"Learn how to build a viewport-relative, fluid, responsive web design using CSS. Information on the pros and cons of such a web design system.\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/#primaryimage\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-viewport-relative-fluid-responsive-web-design.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-viewport-relative-fluid-responsive-web-design.png\",\"width\":1200,\"height\":676,\"caption\":\"CSS viewport-relative, fluid, responsive web design\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#website\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"name\":\"Terluin Webdesign\",\"description\":\"Let your website work for you\",\"publisher\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#organization\",\"name\":\"Terluin Webdesign\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"contentUrl\":\"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png\",\"width\":294,\"height\":674,\"caption\":\"Terluin Webdesign\"},\"image\":{\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/TerluinWebdesign\/\",\"https:\/\/x.com\/terluinwdesign\",\"https:\/\/www.instagram.com\/terluinwebdesign\/\",\"https:\/\/www.linkedin.com\/company\/terluin-webdesig\/\",\"https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd\",\"name\":\"Thijs Terluin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g\",\"caption\":\"Thijs Terluin\"},\"description\":\"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/thijs-terluin\/\"],\"url\":\"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Viewport-relative, fluid, responsive web design - Pros and Cons & Demo","description":"Learn how to build a viewport-relative, fluid, responsive web design using CSS. Information on the pros and cons of such a web design system.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/","og_locale":"en_US","og_type":"article","og_title":"Viewport-relative, fluid, responsive web design - Pros and Cons & Demo","og_description":"Learn how to build a viewport-relative, fluid, responsive web design using CSS. Information on the pros and cons of such a web design system.","og_url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/","og_site_name":"Terluin Webdesign","article_publisher":"https:\/\/www.facebook.com\/TerluinWebdesign\/","article_published_time":"2021-10-31T15:31:08+00:00","article_modified_time":"2025-07-18T14:52:29+00:00","og_image":[{"width":1200,"height":676,"url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-viewport-relative-fluid-responsive-web-design.png","type":"image\/png"}],"author":"Thijs Terluin","twitter_card":"summary_large_image","twitter_creator":"@terluinwdesign","twitter_site":"@terluinwdesign","twitter_misc":{"Written by":"Thijs Terluin","Est. reading time":"18 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/#article","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/"},"author":{"name":"Thijs Terluin","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd"},"headline":"Viewport-relative, fluid, responsive web design","datePublished":"2021-10-31T15:31:08+00:00","dateModified":"2025-07-18T14:52:29+00:00","mainEntityOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/"},"wordCount":5,"publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-viewport-relative-fluid-responsive-web-design.png","articleSection":["Blog","CSS"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/","name":"Viewport-relative, fluid, responsive web design - Pros and Cons & Demo","isPartOf":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/#primaryimage"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/#primaryimage"},"thumbnailUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-viewport-relative-fluid-responsive-web-design.png","datePublished":"2021-10-31T15:31:08+00:00","dateModified":"2025-07-18T14:52:29+00:00","description":"Learn how to build a viewport-relative, fluid, responsive web design using CSS. Information on the pros and cons of such a web design system.","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/blog\/viewport-relative-fluid-responsive-web-design\/#primaryimage","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-viewport-relative-fluid-responsive-web-design.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2021\/10\/css-viewport-relative-fluid-responsive-web-design.png","width":1200,"height":676,"caption":"CSS viewport-relative, fluid, responsive web design"},{"@type":"WebSite","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#website","url":"https:\/\/www.terluinwebdesign.nl\/en\/","name":"Terluin Webdesign","description":"Let your website work for you","publisher":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.terluinwebdesign.nl\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#organization","name":"Terluin Webdesign","url":"https:\/\/www.terluinwebdesign.nl\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","contentUrl":"https:\/\/www.terluinwebdesign.nl\/en\/wp-content\/uploads\/2019\/05\/terluin.png","width":294,"height":674,"caption":"Terluin Webdesign"},"image":{"@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/TerluinWebdesign\/","https:\/\/x.com\/terluinwdesign","https:\/\/www.instagram.com\/terluinwebdesign\/","https:\/\/www.linkedin.com\/company\/terluin-webdesig\/","https:\/\/www.youtube.com\/channel\/UCqaaHJh0caCmucUaWsewhKQ"]},{"@type":"Person","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/a6f6b03a4d7acb99553ec297f1d6d1dd","name":"Thijs Terluin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.terluinwebdesign.nl\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/adff8d4881876bce4a26779bbab04daa390a45232b37b4f00a6ad954e4bc705f?s=96&d=mm&r=g","caption":"Thijs Terluin"},"description":"Thijs Terluin is a web designer at Terluin Webdesign. He specializes in providing the structure, functionalities and speed of websites and web shops on devices and web browsers.","sameAs":["https:\/\/www.linkedin.com\/in\/thijs-terluin\/"],"url":"https:\/\/www.terluinwebdesign.nl\/en\/about-us\/thijs-terluin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6587","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/comments?post=6587"}],"version-history":[{"count":1,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6587\/revisions"}],"predecessor-version":[{"id":9082,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/posts\/6587\/revisions\/9082"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media\/6658"}],"wp:attachment":[{"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/media?parent=6587"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/categories?post=6587"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.terluinwebdesign.nl\/en\/wp-json\/wp\/v2\/tags?post=6587"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}