[starikovs]

Thanks for the article!

I remember I had a hard time trying to stretch dialog to full screen for mobile devices, but it actually didn't want to work. The code was something like this:

dialog { position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px; }

[askew]

You can shorthand the last four declarations with a single `inset: 10px;` (or maybe `inset: .625rem;`?

[starikovs]

That's cool, actually I didn't know about this one :)

[skgough]

this is most likely due to the absolute positioning. position: absolute will use the top-left corner of the closest ancestor that is "positioned" as the origin for it's layout [1]. If you want that origin to be the top-left corner of the viewport, use position: fixed.

[1] https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_...

[Lvl999Noob]

In addition to `position: fixed`, shouldn't it be top, left, height, width, instead of top, left, bottom, right? In the second case, it would follow the top and left instructions then take the necessary amount of space, ignoring right and bottom?

[nicoburns]

For absolutely positioned elements, if you set all four sides then the height and width will be automatically computed.