Achieving a "fluid liquid layout" on this page involves the use of two key systems:
JavaScript Implementation
Within main.js, the following code snippet can be found:
$(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 facilitated by the jQuery smartresize plugin, which helps in managing resize events efficiently to prevent overwhelming the JS engine.
This script dynamically toggles UI elements based on window width and adjusts title height using a bespoke jQuery function.
CSS Media Queries Utilization
Examining main.css, you will encounter rules such as:
@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 CSS media queries adjust various properties based on the viewport's size.
For further details on CSS3 media queries, please refer to w3.org/TR/css3-mediaqueries/