Liquid, Fluid site layout 12 Jul, 2012 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.


Tags  ·   layout  ·   fluid  ·   Show Comments ▾


     
Original design for Tumblr crafted by Prashanth Kamalakanthan.
Adapted for Tumblr & Jekyll by Sai Charan. Customized theme available on Github.

Sai Charan's blog by Sai Charan is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 3.0 Unported License. 		Creative Commons License