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 percentages. The math to calculate each element's percentage width is as follows:

    (width of element / width of containing element) * 100

    Note

    A containing element is the element that contains the element we are working with, for example the containing element of <header> is <body>.

    I haven't been entirely precise with my percentages. I prefer to use round number percentages that fit within our layout than to match them up exactly to the original pixels. After all, as soon as someone resizes his/her browser window, those original pixel widths become irrelevant.

  • Some extra styling on the <body> element has set a maximum width as follows: 
    body {
width: 90%;
max-width: 940px;
}

    What this does is set the width of the <body> element to be 90% of the width of the browser window, except in the case of very large screens, where the <body> element stops expanding at 940px of width, our original measurement. This avoids long lines of text running from left to right or large areas of white space within the layout.

To summarize what we did, we took the layout styling for the Carborelli's site and changed width settings to percentages instead of pixels to make the layout fluid. We also defined a maximum width for our site to avoid it getting too wide on very large screens. There was a bit of math involved but it wasn't too onerous!

Have a go hero

Now try it yourself. Perform the following steps:

  1. Open up the stylesheet for your site and find the layout styling.
  2. Identify all the settings for the width of elements.
  3. Apply max-width to your site's <body>.
  4. Work out on what percentage widths all the internal elements should have.
  5. Amend the CSS to apply widths instead of pixels.
  6. Open the site in your browser window and see what happens. It should resize according to the size of the window.

But it gets better. This layout still isn't going to look too good on very small screens. We need to set some specific styling for mobile devices, which is where media queries come in.

上一章目录下一章