Use screen.width inside calc (css)

Question

Is there a was of using screen.width inside calc? Something like this:

 left: calc(250px + screen.width - 1024px)!important;

It is for a concrete situation where the @media(max-width: 1024px) won't work.

score 60 · Accepted Answer · answered Aug 09 '17 at 13:05

60

100vw = 100% of viewport width

left:calc(250px + 100vw - 1024px)!important;

answered Aug 09 '17 at 13:05

Ehsan

score 6 · Answer 2 · answered Aug 09 '17 at 13:04

6

You can use vw units to size things in relation to viewport width, so try this:

left: calc(250px + 100vw - 1024px) !important;

answered Aug 09 '17 at 13:04

jberglund

score 2 · Answer 3 · answered Aug 09 '17 at 13:06

2

left: calc(250px + 100vw - 1024px)!important; this probably won't work I would do it like this: calc(100vw - 774px); (1024 - 250 = 774)

vw - view width

answered Aug 09 '17 at 13:06

Czoka

score -5 · Answer 4 · answered Jun 19 '18 at 21:55

-5

Afaik there's no way how to get "actual viewport width" inside the calc formula :(

answered Jun 19 '18 at 21:55

sKopheK

2

Not even the "vw" unit, meaning "viewport width", as seen in the other three nearly-identical answers? – Linkyu Jun 22 '18 at 14:29
managed to get it working in the end, it's just confusing with various units inside of the equations – sKopheK Jun 24 '18 at 21:33

4 Answers4