Creating a responsive image grid

Hi guys!

Not sure if what I’m trying to achieve is even possible, but I’m hoping that someone can help me out!

I’m wanting to create an effect on my website similar to the ‘instagram collage’ thing - where one larger image is spliced into smaller images - which can then be used as individual active links. I’ve managed to achieve it by creating the image, splicing it, and then using the sectioned image parts as background images in the rows/columns where I want them to sit on my page.

It looks awesome. It’s exactly what I want. I was super excited. Until I realised that the functionality just isn’t there as soon as someone views the site on a mobile device (functionality breaks at ‘480px or smaller’.

So instead of the images being laid out like so:

They are stacked for mobile like this:

So I guess my questions are:

  1. Is there a way to code the images so they resize into the grid on mobile (even if it’s small) and not the stacked images?
  2. If not, is there any other way to achieve what I want to, while keeping the site responsive?

At the end of the day it’s more important for my site to be responsive than have a cool feature, but I’m wondering if there’s a way to fix this that’s staring me in the face.

Thanks to anyone who can assist! :slight_smile:

Hi Loutopia,

Thank you for writing in, I assume your layout is a 2 column row, if so please add this to Theme Options > CSS

@media (max-width: 767px) {
	.stay-inline .x-column.x-sm {
		float: left;
	    width: 48%;
	    margin-right: 4%;
	}
	.stay-inline .x-column.x-sm:last-of-type {
		margin-bottom: 0;
	}
}

Then add the CLASS stay-inline on the section.



For your option2, if option1 did not work. You can utilize the Essential Grid extension.

Essential Grid WordPress Plugin - Introduction

Hope it helps,
Cheers!

Thanks so much for your quick reply! The code didn’t work, but I’m now setting up essential grid and it’s looking good. You rock! :slight_smile:

We are delighted to assist you with this.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.