CODEWITHSUNDEEP
htmlcss
NDG
NDG

Reputation: 41

Incremental padding using CSS?

Is there a way to have incremental padding using CSS? E.g. having the amount of padding increment by X pixels in relation to the viewport when the latter is between x and Y dimensions?

Using @media only works for the first breakpoint, but I would want the padding to change incrementally.

Upvotes: 0

Views: 876

Answers (1)

Johannes
Johannes

Reputation: 67768

You can use the vw or vh units for the padding - those are relative to the viewport.

For example

div {
  padding: 2.5vw;
}

See http://codepen.io/anon/pen/QEdgeX

(and you can also use calc using a pixel value in combination with vw)

Upvotes: 1

Related Questions