In this web site, www.emblematiq.com, the layout is fluid/liquid. I was looking at the code but can not seem to figure out how it is achieved. Looks like a fixed width layout with the canvas
element having a width of 1180px.
Can't seem to find
I am sure I am missing something obvious but for the life of me can't find the responsible code for it.
This page uses two systems to achieve "fluid liquid layout" :
In main.js
we can see :
$(window).bind("smartresize", function( event ) {
if($("#contactForm")[0]) {enableContact(); if($(window).width() >= 460){doContact();} else {undoContact();}}
if($("body").hasClass("home")){setTitleHeight();}
});
The smartresize event is brought by the jQuery smartresize plugin, used to get throttled resize events (to avoid overloading the JS engine).
This function enables and disables UI elements depending on the window width, and adapts the title height using a custom function making heavy use of jQuery.
media
selectorsIn main.css
we can see, for example :
@media only screen and (max-width:1180px) {body{min-width:944px;}}
@media only screen and (max-width:944px) {body{min-width:708px;}}
@media only screen and (max-width:708px) {body{font-size:13px; min-width:472px;}}
@media only screen and (max-width:472px) {body{font-size:11px; line-height:15px; min-width:236px;}}
These rules set different properties according to the element width.