Question

In this web site, http://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

1. Any media queries in the CSS.
2. Widths are set with px and not %.
3. The JavaScript/jQuery involved does not seem to to be related to it.

I am sure I am missing something obvious but for the life of me can’t find the responsible code for it.

Answer 1

This page uses two systems to achieve “fluid liquid layout” :

Javascript

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.

CSS media selectors

In 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.

See w3.org/TR/css3-mediaqueries/