Federico Ferrari Federico Ferrari - 24 days ago 21
CSS Question

Keep constant margin based on vw

How can I give margin to

#more
so it will be always at the same distance from
#logo
when resizing the window?

Look at the code down here in fullscreen and resize the window you'll see that the distance from 1 to 2 changes.

Thanks for the help.



body {
font-size: 5vw;
font-family: Arial;
letter-spacing: 1px;
}
#logo {
top: 10px;
left: 10px;
position: fixed;
}
#more {
top: 10px;
left: 50px;
position: fixed;
}

<div id=logo>1</div>
<div id=more>23456789</div>




Answer

You want to use the same unit you use for your font-size: which is vh.

2 important side notes:

  • dont use position: fixed if you want to really be responsive
  • don't use id's in css, you are not allowed re-use these in html.

body {
  font-size: 5vw;
  font-family: Arial;
  letter-spacing: 1px;
}
#logo {
  display:inline;
}
#more {
  display:inline;
  padding-left: 2vw;
}
<div id=logo>1</div>
<div id=more>23456789</div>

Comments