How this web site achieves a fluid/liquid layout [closed]

Question

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.

Closed 9 years ago.

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

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/

Answer 2

The CSS is packed with media queries: http://www.emblematiq.com/global/main.css

Answer 3

The main CSS file is loaded with media queries.

It uses CSS transitions to make the page respond so nicely to layout changes.

Answer 4

This comes under the blanket phrase "responsive web design" http://en.wikipedia.org/wiki/Responsive_web_design. There are various ways of achieving it, as the article explains. Your site may be more adaptable to one of the methods in particular.

Answer 5

According to its source code. I assumed that it's a css.

<link rel="stylesheet" href="/global/main.css" />