DEV Community

Cover image for Let's create a responsive photo gallery - mobile first
Savvas Stephanides
Savvas Stephanides

Posted on

Let's create a responsive photo gallery - mobile first

As web developers, we want our hard work to reach as many people as possible. This means adjusting our websites to different audiences with different devices, especially with the popularity of smartphones and tablets. This is where Responsive Web Design comes along: one page where the elements adjust according to screen size. I wrote an article here before which makes the case that a responsive design should start with mobile first because of convenience. In this article, I will show you an example of designing a photo gallery in this way.

Let's get to it! πŸ”₯

Steps

1. Find photos

First of all, before we create our website, let's go to Unsplash and find some photos to add to our gallery. I've found 10 photos from Unsplash for our tutorial.

In my project directory, I've created a photos directory and added all my photos there.

Image description

2. Our HTML

Next, we create our web page. It's going to be a very basic HTML file with an <h1> heading and a <div> which contains our photos (<img>s):

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My gallery</title>
</head>

<body>
    <h1>My gallery</h1>

    <div id="photos">
        <img src="photos/01.jpg" alt="A photo" />
        <img src="photos/02.jpg" alt="A photo" />
        <img src="photos/03.jpg" alt="A photo" />
        <img src="photos/04.jpg" alt="A photo" />
        <img src="photos/05.jpg" alt="A photo" />
        <img src="photos/06.jpg" alt="A photo" />
        <img src="photos/07.jpg" alt="A photo" />
        <img src="photos/08.jpg" alt="A photo" />
        <img src="photos/09.jpg" alt="A photo" />
        <img src="photos/10.jpg" alt="A photo" />
    </div>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

☝️ Hang on, hang on! Before you grab your pitchforks, I know "A photo" is an awful alt text, especially for all 10 of our photos. But this is a tutorial, so you'll have to live with it for a bit.

Now if we open our page in a browser, it will look awful with large misplaced images.

Image description

So let's add our CSS next.

3. Style for mobile

Now that we have our HTML in place, we're going to grab our browser window by its side, and reduce its width to about 300px. Now we can design our gallery for mobile. This is what our CSS looks like:

*{
    margin: 0;
    padding: 0;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

#photos{
    margin-top: 30px;
}

#photos img{
    display: block;
    width: 100%;
    margin-top: 9px;
}
Enter fullscreen mode Exit fullscreen mode

This is what our CSS does:

  1. First, we reset our CSS using margin: 0 and padding: 0.
  2. Set the font for the entire site
  3. Give our photos a little margin.
  4. Set each photo to fill up the width of our screen and give each photo some margin.

That's it.

Image description

Just like that, we have a mobile-friendly photo gallery.

Notice we haven't used flex or grid even once? That's because we're basically taking advantage of a browser's default flow, which is every element being placed under the other.

3. Adjust for larger screens

Now that the mobile version of our website is ready, we can slowly increase our browser window's width and see how we can adjust for larger screens.

Let's now update our CSS so that if the screen size is 500px and above, the photos appear in a 2-column grid:

@media (min-width: 500px){
    #photos{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 6px;

        margin-top: 0;
    }
}
Enter fullscreen mode Exit fullscreen mode

Now we're starting to add enhancements to our CSS like grid. All we need to do, is to add a new lines of code. It's a lot easier to enhance than to remove stuff. This is what makes mobile-first so great.

Image description

4. Adjust for even larger screens

Now that we've adjusted for larger screens, we can now increase our screen sizes a bit further to adjust to desktop displays.

This is even easier to make. All we need to do is change the grid columns from 2 to 3:

@media (min-width: 900px){
    #photos{
        grid-template-columns: repeat(3, 1fr);
        width: 900px;
        margin: auto;
    }

}
Enter fullscreen mode Exit fullscreen mode

We've also set it so that our gallery grid doesn't go over 900px and it's stuck in the middle with margin: auto.

Image description

And just like that we have a nicely layed out gallery for desktop:

Image description

Conclusion

People use the web in different ways. On a phone, on a desktop, in landscape mode, in portrait mode. Whatever they choose to browse the web with, as a web developer you have to cater for this, or else you'll lose them. Responsive web design is the best and most popular way to make sure your site is suitable for every scenario. Mobile-first is the most efficient way to implement responsive design and the way that makes the most sense. This post has proven this.

Have you made your own responsive website? Did you start with mobile or desktop? Let me know!

Discussion (2)

Collapse
craftyminer1971 profile image
CraftyMiner1971

Simple tutorials are my all-time fave! Thanks! It's mainly because I have a simple mind, and I'm kind of afraid to use it!

Collapse
savvasstephnds profile image
Savvas Stephanides Author

No problem!