Let’s Create a Responsive Picture Gallery – Part 3

  • 6 Read Time(minutes)
  • 3/5 Difficulty
  • <> Application

In today’s tutorial, we’ll finish up our recently created picture gallery by making it responsive. Responsive design is one that literally responds to the user’s browser window size. This way everyone can view the same content no matter what resolution device they’re using. Let’s get started!

What’s really neat about this tutorial is that we’ll only add just a few lines to our HTML’s head, we won’t touch the body at all. We’ll create two more CSS files and link them into our HTML document. But first, let’s modify the existing stylesheet link and add some new ones. Currently the link to our existing style.css looks like this:

<link rel="Stylesheet" href="style.css">

Simple as that. So how are we going to add multiple stylesheets based on the resolution? We’ll use CSS3 Media Queries for this matter.

If you haven’t heard of CSS3 Media Queries yet, I strongly recommend reading my Quick-Tip on how to implement CSS3 Media Queries in practice. Once you’ve read that article, you’ll definitely understand what’s going on in the next section.

So, let’s rewrite our existing line of code as follows.

<link media="only screen and (min-width: 1000px)" rel="Stylesheet" href="style.css">

By adding the media selector we can tell the browser to only use this CSS file when the browser’s resolution is bigger than 1000 pixels. Essentially, this will work perfectly with the standard monitor screen resolution of 1024×768.

Now that every resolution above 1000px is covered, let’s fix every resolutions below. We’ll add two more stylesheets, one for 480px mobile devices and one for 320px mobile devices.

<link media="only screen and (min-width: 480px) and (max-width: 999px)" rel="Stylesheet" href="medium.css">
<link media="only screen and (max-width: 479px)" rel="Stylesheet" href="small.css">

The first line assumes that we have a file called medium.css that will be called when the resolution is between 480px and 999px; and a small.css file that will be used below 480 pixels.

So, first, let’s create our medium.css. Open up style.css, and copy and paste all its content into a new file. Save this new file as medium.css. Once you’re done, let’s start editing it!

Note: In this article, I’ll only put down the lines that need to be edited.

First attribute, the body. Let’s decrease the font size from 16px to 14px.

body {
    font-size: 14px;
}

The #headerContainer needs to remain full-width, but our header’s width must be reduced to 480px in order to fit.

header {
    width: 480px;
}

Next stop, the logo. Let’s give it some breathing room to the left my adding a margin.

#logo {
    margin-left: 20px;
}

Same thing with the logo, with right side margin.

#contactBtn {
    margin-right: 30px;
}

Next one in the line is the section declaration. In the medium version we’ll create a two column flexible layout. This means whatever the browser size is between 480 and 960 pixels, the site will always have a two columns with varied with based on the window size. To do this, we need to set our widths in percents instead of pixels. Ultimately, we’ll be creating a hybrid layout this way.

This way, there’ll be 10 pixels of room on each side that will serve as some sort of a padding.

section {
    width: 95%;
}

Okay, the main wrapper now fits, let’s set the articles’ sizes accordingly. We have to be careful with margins.

article {
    width: 44%;
    margin: 0 1% 50px;
}

We also need to target the images inside the articles bacause right now their default state is auto. By settings their width to auto, their dimensions will update as you resize the browser window.

article img {
    width: 100%;
}

One last thing to set is the footer. Its container is already at 100%, we just need to adjust the footer div to about 92%

footer {
    width: 92%;
}

And this is it for the medium version. If you now test the site in your browser between 480 and 960 pixels, you can „see what we did here” if you will.

Okay, let’s finish up this tutorial by creating the small version of our gallery. Essentially this one will have a fixed 480px width, with a minimum width of 320px where possible. Let’s wrap it up!

We’ll play a little with this layout. We’ll extend the height of the header and move the logo and contactBtn right below each other.

First, we’ll extend the headerContainer, and reduce the header’s width to our desired size.

#headerContainer {
    height: 145px;
}
header {
    width: 320px;
}

Next stop, the logo. We’ll totally rewrite this as we want it to be centered. The logo has been declared to be an image. Let’s not touch the HTML, but tackle it with CSS only. To make an inline element (like an image) centered on the page, we need to first convert it to a block element, then we can use the good old „margin: 0 auto;” trick.

#logo {
    display: block;
    padding-top: 27px;
    margin: 0 auto;
}

Notice I changed margin-top to padding-top.

Same thing happens with contactBtn, we need it centered. So we’ll clear floats and readjust margins. Notice we aren’t using „display: block;” here as all divs are block-level elements by default.

#contactBtn {
    margin: 15px auto 0;
}

Section is coming up. In the small version we need to reduce the 50px top margin on each to let’s say 30 pixels. Simple as follows:

section {
    width: 320px;
    margin: 30px auto 0;
}

Articles are the next in line. We’ll set their width to 300 pixels, leaving 10px space on each side. We’ll also set article img to the same size as its container in case our image sizes don’t match.

article {
    width: 300px;
    height: 250px;
    padding: 10px;
    margin-bottom: 30px;
}
article img {
    width: 300px;
}

One last thing to adjust here is the footer’s fixed width to 300px.

footer {
    width: 300px;
}

And that’s it, folks! In this tutorial series we’ve learnt how to create a simple gallery site’s mockup in Photoshop, then we’ve coded it into semantic HTML and CSS, and now we’ve converted the working site into a hybrid-responsive layout. Congratulations, and thank you for joining me!

You can view the final working responsive site here.

Please if you liked this tutorial series, leave a comment and share the wealth! See you guys next time!

Share it?

There should be an ad here...

Aaaw, too bad you're using AdBlock. Care to add my Blog to your whitelist, please? Much appreciated!

Written by

Web designer, web developer, UI/UX designer 9-5. Energy drink consumer, video game addict, avid blogger 5-9. Owner of Szaboka.com.

Related Articles

2 Responses

Comments

  • PhuongTruc said on 2012.07.13. at 6:18 Reply

    Thanks very much. Nice tutorial :)

  • ululf01 said on 2013.02.12. at 9:58 Reply

    Excellent post ,I love these!

Trackbacks

There are no trackbacks yet.

Join the Conversation

Captcha: + 1 = nine