CODEWITHSUNDEEP
htmlcss
R. Gggs
R. Gggs

Reputation: 33

How do I position a DOM element in the exact same position no matter the screen size?

I am trying to add some input boxes that should always be in the same position, but when I view the webpage in my macbook the input box is a different location than if I view it with my bigger monitor. What is the best way to tackle this? Here is a jsfiddle of what more or less I'm trying to do.

<input name="arrive" type="date" placeholder="Arrival date:">

input[name="arrive"] {
    position: absolute;
    width: 16.9em;
    top: 18vw;
    left: 15vw;
}

https://jsfiddle.net/8mn5cdwt/1/

Upvotes: 0

Views: 52

Answers (2)

Vadim
Vadim

Reputation: 3439

Viewport Width (vw) unit is based on the width of the viewport. You need to specify position in pixels, not in vw:

<input name="arrive" type="date" placeholder="Arrival date:">

// 180 and 150 are your values in pixels (you need to replace them 
// with what you need)
input[name="arrive"] {
    position: absolute;
    width: 16.9em;
    top: 180px;
    left: 150px;
}

Upvotes: 1

mipurale
mipurale

Reputation: 57

vw refers to the width of the viewport. If your viewport width is 1920px, then your top is now 0.18*1920px = 345.6px; and if it is 720px, it will change to 129.6px.

Also I'm not sure about your problem, but usually when setting top, you would use vh (viewport height).

Try using pixels to set the position. e.g. top: 120px;

Upvotes: 0

Related Questions