Liquid, Fluid site layout  

Inspired by wikipedia, marco.org and other gorgeous websites, I added the necessary CSS for this website to adapt dynamically with varying layouts – note: no Javascript, just plain CSS. The solution is two fold:

  • In the <head> tag, add the following <meta> tag:
  • In the CSS file, add special CSS rules for varying screen sizes using this syntax: @media (max-width: 1024px) { /* CSS rules for screen sizes < 1024 px */ } And yes, as always you may need to provide IE specific rules/overrides in a separate CSS file.

Go ahead and try it: for the most ’effect’ & live preview, resize your browser window. Or view this site on your tablet or mobile device.