Questions tagged [viewport-units]

The viewport units `vh`, `vw`, `vmin` and `vmax` are units of measurement relative to the browser viewport size, introduced in CSS3.

Filter by
Sorted by
Tagged with
0 votes
2 answers
29 views

How does viewport width work with font-size in css?

Can someone help me understand how the viewport-width unit works with font size? In the documentation it says that 1vw = 1% of the viewport width (so 1% of the window width I guess?) but if I give my ...
Lenny's user avatar
  • 21
0 votes
1 answer
35 views

Fixing 100vh Menu Overlap with iPhone Top Bar

I'm facing a problem where a green background color appears behind a menu that's supposed to be entirely red. The menu is designed to fill the full screen height (100vh), but on iPhone, the top bar ...
in2d's user avatar
  • 556
1 vote
1 answer
56 views

CSS - Text scaling with VH and VW value based on the width and height of the window

I have a responsive element with width and height that adapt to the browser window while maintaining the aspect ratio. inside I have a text with VH units (viewport Height) and I would like it to ...
Weberone's user avatar
0 votes
0 answers
25 views

Div growing instead of overflow being applied [duplicate]

How can I prevent main-content-inner from growing to fit the content within it, and instead have an overflow enabled, so the size remains the same but becomes scrollable? To be clear, the red border ...
devklick's user avatar
  • 2,237
0 votes
1 answer
29 views

Why does top offset, when given in % doesn't move the relatively positioned element vertically?

Let's say there's a relatively positioned div element. When I set the top value in %, it does nothing at all. But as soon as I express it in px, it works. Is there any particular reason/logic? This ...
Pranav Anand's user avatar
0 votes
1 answer
36 views

How to make a margin smoothly transition between two percentages when the window size is adjusted

I want to have a percentage margin around an element of 5% of the viewport's width when the viewport is small, and 15% of the width of the viewport when the viewport is larger. I could use a media ...
Malachi's user avatar
1 vote
0 answers
17 views

Bypass for Windows Display Scaling messing up with the vw units?

I'm following a course for React and at some point the teacher is using vw units to set the width of a container for some cards. Everything looks good for him, but when i copy-paste the code into my ...
Iustin's user avatar
  • 82
0 votes
0 answers
36 views

How can I allow an image inside of a column to extend to the edge of the viewport?

I have two 50% width columns that exist in a Bootstrap container. The left column contains some text, and the right column contains some text and an image. I'd like to allow the image to break out of ...
Timothy Fisher's user avatar
0 votes
0 answers
60 views

How to efficiently convert pixels to viewport units?

I have been building a Progressive Web App. For designing its layout, I have (erroneously) been using a viewport meta width of 720px, as it looked good on my mobile phone. To make it functional on any ...
enricw's user avatar
  • 263
0 votes
0 answers
40 views

iframe position not responsive on one side when using vw/vh, inconsistent spacing

I've included an iframe of another page onto my landing page and it's next to a menu bar on the left. I enclosed the two into a div container and made a grid. The menu bar div has a nested grid in ...
smitee's user avatar
  • 1
0 votes
0 answers
23 views

Varying fonts of some html elements on dektop mode for different mobile and different browsers

I have set a fixed font-size for the "p" and "h4" elements in my footer but I keep experiencing different font-size while using desktop mode on my mobile. I get the expected result ...
oyerohabib's user avatar
0 votes
1 answer
384 views

i am using VW and VH in website as unit but when i am opening my inspection tab my websites design shift upword,so how to solve the issue?

I am new to web development.... please suggest me some solution for this issue I am using 'vw' for width and 'vh' for height but its not working well when i am opening my website in mobile and when i ...
shiv ram's user avatar
0 votes
1 answer
23 views

is there a way to find ratio for size and width of div

I have two sass variables for width and height of a certain div: $width: 277.98px; $height: 156.36px; I want to convert this into some kind of ratio so that when adjusting the size of the screen, ...
Yehuda's user avatar
  • 57
0 votes
1 answer
51 views

Size element proportionally to viewport

I would like to size an hmtl div element proportionally to viewport's size. This element would be positioned into a dynamically sized container so it's not possible to use viewport units both for ...
Apnw2's user avatar
  • 3
3 votes
2 answers
5k views

Why is the CSS height:100vh; rule exceeding the viewport height on mobile devices?

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 is ...
PhpDoe's user avatar
  • 47
0 votes
0 answers
65 views

How to calculate CSS vh unit to match previous configuration defned with px?

Recently, Wikimedia upgraded an HTML page layout used for editing, by changing the CSS units from px to vh. The problem is that this HTML page also contains several fixed height text boxes [listed ...
ineuw's user avatar
  • 105
1 vote
1 answer
341 views

Get the numeric part of an amount from CSS

Is there a way, using pure CSS to fetch the numeric value without pulling back the unit too? e.g. say I have a CSS variable defined as :root {--maxWidth: 100px;}. If I want to get the ratio of that ...
JohnLBevan's user avatar
  • 23.1k
0 votes
0 answers
46 views

CSS - 100vh body unwanted vertical scrollbar [duplicate]

I set up a very simple webpage using css and html and I get an unwanted vertical scrollbar. I do not get why the scrollbar appears. When I inspect my Webpage with DevTools in Fullscreen (Google Chrome)...
TheKnax's user avatar
  • 43
0 votes
1 answer
314 views

The vh unit doesn't seem to work with transform: translateY

I have 2 half-page-sized overlays that translate the opposite ways to give the illusion that the screen is opening up. In addition, I want them to stop at about 8% from the viewport top or bottom and ...
RDX10290's user avatar
  • 471
0 votes
2 answers
633 views

Get VW/VH position from onclick event in JS

This code will give me the x and y value of the click in pixels: document.getElementById("game").addEventListener("click", function(event) { console.log(event.clientX, event....
Léo Badeaux's user avatar
0 votes
1 answer
415 views

How to css rotate with an angle depending on viewport size

I'm trying to define a rotation of an element depending on viewport width in CSS. Here with a "hard" "transform: rotate(-3.4deg);" : https://i.postimg.cc/3NqY2Hzy/rotate-1.jpg I'd ...
Cari Bou's user avatar
0 votes
2 answers
164 views

clarification of css width calculation

By trial and error, I calculated the width of a header block: width: calc(100% - 96px); width: calc(100vw - 112px); Both (seem to) produce the same result. I read how width is defined and want to ...
Abbas Jaffary's user avatar
1 vote
1 answer
158 views

How to Extract Viewport Specific CSS?

I am trying to optimize speed of my existing wesite. I want to remove unused css for each viewport. The website has media-queries in main css. I want to extract / create css file which will contain ...
SarahLacy's user avatar
0 votes
1 answer
63 views

center specific child div in a parent div that has multiple divs

I have a parent div that has two child divs. The parent div takes up the viewport height. The first child (the header) has to be at the top, while the second child (the text wrapper) has to be ...
U. Watt's user avatar
  • 605
2 votes
0 answers
45 views

Is there some way to suggest a new feature to be added to CSS? [closed]

I have this idea for new relative CSS units; they are similar to 'vh' and 'vw' units but instead of being relative to the dimensions of the viewport, they would be relative to the dimensions of the ...
BlockNoir's user avatar
0 votes
0 answers
306 views

VH change in MacOS in fullscreen browser

The website I'm creating use a series of which have min-height set at 100vh; inside of which a complex flexbox is used. When finishing my website I notice something that annoys me : when using Chrome ...
Mathis D.'s user avatar
0 votes
4 answers
837 views

Samsung Galaxy A20 Viewport size

I have to write a custom media query in portrait and landscape for Samsung A20 and I can't find the viewport. Does anyone know this? (not for A20s or A20e). Thanks
Elena's user avatar
  • 1
0 votes
3 answers
9k views

Why 100vh is not taking the full screen?

This is the first time I'm getting this type of problem. I'm trying to make responsive navigation bar. At a certain width, I want my nav links div to go to right side bar. But the nav links div is not ...
DMT's user avatar
  • 51
0 votes
0 answers
879 views

Position fixed with vh not working properly on chrome, any assitance?

I'm having a problem, specifically when I use chrome. I use on my website portfolio a modal element, when users click on it, the modal's background appears only in the upper page taking the whole ...
Ali Shour's user avatar
  • 224
5 votes
8 answers
3k views

How to make div occupy 100% of viewport height in browser

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; } <...
user avatar
0 votes
1 answer
721 views

Specify CSS percentage width as a function of viewport width

I have some paragraphs of text on my webpage that I would like to format to occupy a certain percentage of the page's width. I've decided that when the page is 800px wide, the text should occupy 80% ...
Colin Hanes's user avatar
1 vote
1 answer
303 views

How to change viewport settings for children components (make container to be 100vw/100vh for children)?

In my project I have react-static repository linked (with yarn link) with react repo. "react": "^16.13.1" "react-static": "^6.0.18" From react-static ...
jasiek-k's user avatar
0 votes
1 answer
46 views

How do I best use CSS to make a page with tall nested elements to be limited to the height of the viewport?

How do I best enforce a page to be limited to the height of the viewport? I would like to manage the overflow-y on children elements, but it seems I cannot get the height to constrain--I can only ...
Patrick Szalapski's user avatar
0 votes
0 answers
409 views

100vh - not covering the whole screen

thanks everyone considers helping me! So I did a grid layout, and inside one of the <div> I set the image to be 100vh. The <div> Wasn't set to be 100vh, but I wanted to see what happened ...
omer miloh's user avatar
0 votes
2 answers
2k views

Using vh and wh as responsive units is giving my img a margin, on mobile

I fixed one responsive design problem and introduced another. I've made a cool svg and in it I've included some text. I know, I know – I should've added text via HTML/CSS. But my website is due today ...
wolfie777's user avatar
0 votes
2 answers
464 views

Why 4 divs with `width: 25vw;` cannot align together?

There are 4 divs, each of them has width: 25vw; and height: 100vh;. I thought they could horizontally align in a line and so that tile the whole browser viewport. But they didn't. A line break was ...
Kento's user avatar
  • 78
2 votes
3 answers
486 views

font size is not constant across viewports

see it in action I set font size of h1 to 1.2rem (i.e 19 px) , so it must be 19px across all sizes . when i resize or reduce the browser width the font stays the same 19px . but when i click on device ...
Mohamed Sauood's user avatar
0 votes
2 answers
341 views

How can I get fluid typography that gradually change type scale using the max() CSS Function?

I’m a big fan of fluid typography and I want a website I’m developing to adopt it. Recently, I learned about the max() CSS Function. I thought of using it to get fluid typography. In particular, I ...
Pine Code's user avatar
  • 2,446
0 votes
1 answer
864 views

Should viewport units be responsive in the shadow DOM?

In Safari, I don't think viewport units (such as vw) applied to elements in the shadow DOM actually respond to changes to the viewport. Should they? In the demo below, the light blue <main> ...
Impirator's user avatar
  • 1,392
0 votes
0 answers
39 views

CSS: Maintaining consistent paragraph height as browser resizes

I'm working on a Frontend Mentor challenge and I hit a wall trying to make the design properly responsive. I'm using viewport units for the font size and it works great as long as I keep the browser ...
Chris's user avatar
  • 71
0 votes
1 answer
131 views

Getting polyfill "vminpoly" working with internal CSS

On Saabi's github for vminpoly, a vw and vh unit polyfill (https://github.com/saabi/vminpoly), it says: Only linked stylesheets are being parsed right now but it's very easy to also parse 'style' ...
oatmealNUGGY's user avatar
4 votes
2 answers
6k views

How to set an element's height relative to the screen size

I want to set the height of an element as a percentage of the full-screen mode's dimensions so that when the browser window is smaller, the height does not change.
Anthon's user avatar
  • 41
0 votes
1 answer
194 views

JS How to use relative units in a condition

I have a div, that is 15vh high. In javascript I sometimes change it's height to 20vh. My question is, How to make a condition, if "the div's height" == 15vh, do something? When I use jquery .css("...
Matus86309's user avatar
1 vote
1 answer
418 views

Using css calc with viewport units [duplicate]

Why does this work: left: calc(50vw - (269 * (100vw / 1220 ) ) ); But this doesn't: left: calc(50vw - (269 * (100vw / 1220 ) ) + 269 ); The only difference being + 269. FF inspector says '...
martin's user avatar
  • 393
0 votes
1 answer
130 views

Display issue with CSS viewport units

I'm working on a child theme of WP's Twentyseventeen, which uses VH in order to adjust certain heights, such as the header portion. In the header all I really want to change is to add a sort of ...
QuestionerNo27's user avatar
0 votes
0 answers
466 views

Strange behavior using rem elements are varying heights

I am setting the html font size to a viewport width unit. Then I am setting the height of a div with rem units. When you hit different viewport widths the height of the elements are not the same ...
Steve K's user avatar
  • 8,675
0 votes
1 answer
2k views

CSS - How to keep full image visible regardless the viewport size?

I'm trying to display an image for mobile devices only, but when I resize the browser or select different mobile device my image resizes, which is not what I want. I use vh unit so my image looks the ...
rottenbanana's user avatar
0 votes
1 answer
1k views

JQuery Get element .height() then subtract 100vh?

How would one subtract a 100vh from a .height() value for example $('#luxy').height(); the height is 5000px I want to take 100vh from the 5000px using jQuery or Javascript not CSS?
user3112634's user avatar
3 votes
2 answers
4k views

Official Docs of Viewport Width/Height being bad practice in CSS? [closed]

Using the vw and vh measurements in CSS seems pretty useful sometimes to make Responsive Webpages However, I see and I have personally used it in places where it would be VERY unusual to use. I have ...
Mister SirCode's user avatar
2 votes
1 answer
8k views

is it good practice to use vh and vw for applying padding,margin,width and height for each element on website [closed]

I have a general question regarding use of vw and vh in angular/ionic application.As per suggestion from senior team member we are using below logic to calculate values of margin/padding in vh and vw. ...
Rohit's user avatar
  • 905

1
2 3 4 5