Time for action—making our site fluid
So, let's see what code we can change to turn the Carborelli's site into a fluid one. We'll remove any code that doesn't need to be changed as follows:
/* main layout */ body { width: 90%; max-width: 940px; padding: 10px 1%; } /* Structure the header */ #site-title { width: 35%; } #site-title img { width: 60%; } #header-right { width: 60%; } #header-right img { margin: 10px 0 10px 1%; } #header-right .CTA { padding: 20px 2% 20px 4%; margin: 20px 0; } #header-right .CTA img { width: 20%; } #access { width: 100%; } /*Structure the content*/ #content { width: 65%; } /*alternative styling for pages with no sidebar*/ .page-template-onecolumn-page-php #content, .single-attachment #content { width: 100%; } /* Structure the sidebars */ #primary, #secondary { width: 32%; } /* Structure the footer area */ #copyright { width: 50%; } #credits { width: 50%; }
What just happened?
The following list shows what's happened:
All of those pixel widths have been replaced by...