Simple responsive photo gallery template

Building a photo gallery template is a very basic need in any web based project. Let it be any website or a web product, both of them need a photo gallery.
Photos sell the products.  Photos help users in making decision.

In this project you have to create a simple responsive photo gallery template that can be used on desktop and smaller devices

Photo gallery template – mock ups

Here are the mock ups of how the gallery will look on a desktop and on a smaller device.

Desktop version


simple responsive photo gallery template

Mobile version

simple responsive photo gallery template mobile

Photo gallery template – pre requisite

In order to be able to complete this project, you should have a good understanding of web development.
You should be aware of HTML tags, CSS Properties and Responsive web design approach and CSS3 media queries

Photo gallery template – instructions

  • Download the attached zip file
  • The file has both the versions of the mock ups for large and smaller screens
  • It has photos in smaller and larger sizes
  • It has the next and prev icon image

Photo gallery template – hints and tips

  • Start with mobile first but keep in mind 2 columnar grid structure
  • Make use of standard semantic html tags to build the page structure.
  • Make use of CSS3 media queries  and use just one break point to optimize for desktop and smaller devices. Desktop and iPad should have same view and anything smaller than iPad should be mobile version
  • Keep an eye on the details and difference in the desktop and mobile version
  • Include the HTML5 SHIV if you are using HTML5 tags and supporting IE8 browser