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.
250
questions
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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, ...
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 ...
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 ...
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 ...
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 ...
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)...
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 ...
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....
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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
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 ...
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 ...
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;
}
<...
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% ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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 ...
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> ...
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 ...
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' ...
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.
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("...
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 '...
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 ...
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 ...
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 ...
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?
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 ...
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. ...