Image grid and responsive design advice needed please

HTML & CSS
1

935×812 129 KB

Hi from 8 degrees C pitch black York UK :slight_smile:

The above link illustrates my challenge but here goes. I am designing a site to that will be resposive. This is new territory for me, my competence level in this game is novice but I have built static HTML sites in the past.

But on the home page i want a grid off images but how do i begin to make them responsive? Put another way on the desktop version I want a photo grid of 4 x 5 thumbnail images and then of course for the layout to adjust to tablet then mobile but I’m a bit puzzled :frowning: Thing is in the past I waoul upload images with fixed pixel dimensions which i understand is a big no no for responsive.

So if any one could give me an approach to how to achieve a grid of images that respond to different sized view ports i’d be eternally grateful :smile:

I have tinkered with CSS so am not a total newb :wink:

Grazie mille,
David

2

You can upload pictures with fixed pixel dimensions…I mean you can’t NOT do that. Making them responsive will be allowing them to flow up and down (in size) in coordination with the screen size and available width.

Perhaps if you gave us a jsfiddle we could begin helping you sort this out. You’ll basically just want to set all of those images to display:inline-block and then adjust the container size in the different resolutions (the container size will determine how many images will fit in a single line.)

3

I use display:inline-block; on the containing figure element.
You might also want to load the images as a background image so that you don’t have to crop it.

<figure style="display:inline-block; width:30%; margin-right:1.5%;"><div id="@cwebba1" style="background: url(http://craigwebbart.com/pegasus/assets/images/superman-crop.png) no-repeat center center;
  background-size: cover;"></div>
<figcaption><p>It&rsquo;s Superman!</p></figcaption>
</figure>
4

What? He could use <img> and there would be no cropping. Set the image width to scale in accordance with the container.

5

True.

6

You can either set each image to inline-block or float them. You can then control how many images fit on each line by changing the width of the container.

7

Hey thanks for all the answers, I’ll begin bashing at this later on :slight_smile:

Another question - it would be great if i could post my site to live I have hosting for my soon to be revamped site davidclick.com (Taking out the www. dont want an admin thinking I’m spamming for backlinks) so what is a good way of hosting a test site, sunb domain maybe?

Any advice welcome :slight_smile:

8

I test on a hidden folder and have that folder become my root folder. It’s blocked from the public. Block via htaccess.

9

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