I have an app that is full-screen <div class="h-screen flex flex-col"> <div> Header </div> <div class="flex-1 overflow-y-auto"> Main </div> ...

I have a very odd issue... in every browser and mobile version I encountered this behavior: all the browsers have a top menu when you load the page (showing the address bar for example) which sli...

How to solve the incompatible units problem? @mixin square-size($size, $min: $size, $max: $size) { $clamp-size: min(max($size, $min), $max); width: $clamp-size; height: $clamp-size; } The inp...

In order to make my header fit with all the viewports, I'm using the classic CSS rule height: 100vh; and it works like a charm… except on my mobile. Actually, on the bottom of the screen the header...

I've used vh (viewport units) css in one of my projects but in mobile safari it doesn't work. It seems like Safari doesn't know what to do with vh, but it works fine in other browsers. I would like...

I've tried to create a login form using ONLY vh sizes. Doing this, in the hopes that the form, in all, would scale accordingly to the viewport. It doesn't! For some reason zooming in, creates a b...

As mentioned in the title, is it possible to calculate the vw without the scrollbars in css only? For example, my screen has a width of 1920px. vw returns 1920px, great. But my actual body w...

I want to specify my font size using vw, as in font-size: 3vw; However, I also want to limit the font size to say 36px. How can I achieve the equivalent of max-font-size, which does not exist--i...

I am creating an HTML email template. The desktop version is done with tables, few inline css, all sizes are defined in % or px values. For the mobile version I work with divs and css. Now I'd lik...

I want to use a transform: scale where my width changes to 80vw and my height is auto. So this is what i want = transform: scale(80vw, auto);. Unfortunately, this doesnt work. Is there another way ...

I just learned about a new and uncommon CSS unit. vh and vw measure the percentage of height and width of the viewport respectively. I looked at this question from Stack Overflow, but it made the ...

Background I size everything using viewport units: body { font-size: calc((1vw + 1vh) / 2); } h6 { font-size: 1em; } div { width: 20em; } As the number of pixels in the screen increases, so...

I have a div tag and I realized that it is not filling 100% of the height as it should. My code: #container { width: 100vw; height: 100vh; background: purple; } body { margin: 0px; } <...

Can anyone explain how fallbacks work in CSS? I am trying to set it up for vh and vw and clearly I am not getting it... Here is my attempted solution, which does not work. The height property is t...

I'm using 100vh to center a div vertically with line-height. This site puts support for vh and vw at around 70%, is that a fair assessment? Would you recommend using viewport units when building a ...

Trying to make full screen frames using 100vw and 100vh on divs. I have 2 in this JSfiddle and as you can see there's extra space both on the bottom and on the right of each frame. Is there a way o...

I am working on a WordPress theme and want to enable users to use full-width blocks in it. For this I am using the following HTML/CSS structure (reduced to the basic problem). (note: although this ...

In the sample Dash application below, I am attempting to create a dynamic layout with a variable number of rows and columns. This dynamic grid-style layout will be populated with various graphs tha...

Unfortunately 100vh is not always the same as 100% browser height as can be shown in the following example. html, body { height: 100%; } body { overflow: scroll; } .vh { backgro...

I am using Plotly-Dash and need the font size of my text annotations to scale with the viewport width, as my graphs do. For various headers in my layout, I am able to directly set font-size: '1vw',...

From what I've seen in other answers, CSS viewport units can't be used in calc() statements yet. What I would like to achieve is the following statement: height: calc(100vh - 75vw) Is there some...

width: 100vw;/* 100% of viewport width */ height: 100vh;/* 100% of viewport height*/ This CSS should give me the exact(100%) dimensions of the viewport. But it is apparently too large because it'...

As per How to properly use css-values viewport-relative-lengths?, I've tried using viewport units in the following way, to automatically magnify a tiny page on a big monitor: /* automatically magn...

I'm trying to use a flexbox-based layout to get a sticky footer for my page. This works well in Chrome and Firefox, but in IE11 the footer sits just after my main content. In other words, the main ...

I'm having trouble with vw and vh units on OSX Safari. Take this code as an example: <body style="margin: 0;"> <div style="background: red; height: 100vh; width: 100vw;">&lt...