Prevent input margins from growing on zoom

Admin 1
Viewed 461

I have input fields which margins grow on zoom.

How can I stop this?

code:

css

input {
    background-color: white !important;
    border: 0.1vh solid black;
    width: 20%;
    height: 5vh;
    margin: 2.5vh;
    margin-left: 75%;
    padding-left: 2.5vh;
    font-size: 2vh;
    outline: none;
    box-sizing: border-box;
}
css ruby html php javascript
2 Answers

Change your two margin styles to something related to px (pixels) or rem(line height) instead of vh (view height).

user_138922640

You have this line:

margin-left: 75%;

Should be set to a viewport value. Something like:

margin-left: 10vw;

Here's a JSFiddle that might help things make more sense. Watch how the margins change (or don't) depending on your windows size and zoom level.

As you can see, pixel size doesn't change. The amount of pixels does! rem, em and px all define the margin by a set number of pixels. When less pixels are available (larger zoom) then the margin appears larger in relation to the content.

Percent bases the margin of the parent elements size. In the JSFiddles case, the preview window.

Last is viewport, or vh and vw. Theses are based as a percentage of the browsers width or height. If you browser is 1000px wide, then the margin: 10vw; is 10% of however wide the browser window is.

user_128159330
Related