Anders Riggelsen

Nonlinear CSS size generator

Nonlinear CSS generator GUI

Open the Nonlinear CSS tool

Widescreen websites are more and more common. Therefore a lot of websites center their content in the middle of the browser at some fixed size and attempt to adjust the margins according to the viewport size. This is often done using a margin of some percentage of the viewport size.

The problem is that often when you resize a websize you notice that the content "jumps" around as you resize the window. This is because website designers often use media queries to switch between sizing methods or percentages.

This tool aims to fix this by allowing you to "draw" how exactly you want your margins to behave as a function of your viewport size, giving it that "elastic" feel as you resize. This website uses this as you resize it. Try it :-)

It takes care of all the media queries for you and gives you a pixel perfect smooth transition between the different sizing methods you use.

Normally you'd simply use a few line segments but this tool also supports bezier curves for an even smoother transition - because why not? (It splits up the bezier into smaller linear line segments.) It of course comes at the cost of more CSS media queries being generated.