In the context of this post I will be using the terms ‘fully responsive’ and ‘half responsive’ as I find them to be appropriate and intuitive definitions.
Fully responsive: No set sizes on anything. The size of the element depends entirely on the size of the window, with no max or min width.
Half responsive: Responsive up to a certain size.
I may have found a hole in the information available online and decided to contribute by filling it in. What makes this tutorial different from the rest is that I will be teaching you how to make a fully responsive image grid with responsive content around it, as opposed to one single half responsive image.
We will be working with the following HTML structure:
This is my header
<div class="img-wrapper img-wrapper1">
<img src="images/nature_hires.jpg" alt="responsive image" /></div>
<div class="img-wrapper img-wrapper2">
<img src="images/nightlife_hires.jpg" alt="responsive image" /></div>
<div class="img-wrapper img-wrapper3">
<img src="images/nature2_hires.jpg" alt="responsive image" /></div>
<div class="img-wrapper img-wrapper4">
<img src="images/nightlife2_hires.jpg" alt="responsive image" /></div>
This is my footer
– To get straight to the point I will give you the full CSS sheet, and then I will explain it all step by step.
All our measurements will be in percentages (absolutely necessary for responsive design). If you want your image grid to fill up your entire browser window then set your page’s width to 100%. In this tutorial we will set it to only 90% of the page. If you would like it to be centered then margin:0 auto; will do the trick.
I’m using both float:left; and display:inline-block just to show you different options, but they both do the same (stack our images side by side). We shall set the position to relative because the div inside this wrapper will we set to absolute position later on. And lastly we need to give our images a width percentage that should add up to 100% per row. In this case we want two images per row so we will set them all to 50%, which will make them fit nicely and proportionately together. If you have different sized images you will need different widths and a different class for each in order to target them.
Here’s where we use position:absolute; and in order to fit this container perfectly in its parent div we will have to set all top, bottom, left and right to 0. Our images will hide behind each other, but we will fix that soon.
Easy step, just add a 100% width to your images. Don’t forget to have images with a high resolution to avoid blurriness at big scales (see image)
Step 5: The final trick
A great way to fake a responsive height is by using padding-top and setting it to 100%. We will need to use display block here as well, but all of this will only work if and when we use the pseudo-element :after, and make sure it’s all after the content:””; . If you would like this explained further, take a look at the design shack article, they did an great job at it.
To make our grid look nicer we should add some margin in-between our images. Remember to always use percentages for this so that the spacing stays proportionate at any size. Also, don’t forget that all percentages in one row should add up to 100% including margins. In this example we want our margins to be .5% so our image wrappers will have to be 49.75% each. This is where our extra classes come in handy.