Responsive grid percentages are baking my noodle :-(

HTML & CSS
1

1024×819 95.5 KB

Hi from nearly dark York UK :smile:

The above link points to a design issue I cant fet my head around being brand new to responsive design.
Ok well her are the files I’m working with index.html (1.7 KB) main.css (1010 Bytes) fluid-grid.css (2.5 KB)

Now as the top link illustrates Ive learnt from previous help the forum that the images to achive the layout im after have to use CSS inline (or something like that) But what i cant get my head around is what size must i upload crop these pics to in photoshop and load into the site.

Here what I think i have to do…

The div container wrapping the images is 49.5% of grid container that is 1232px. 49% of 1232px is 603px so if i wanted 4 in a row they must not exceed 150px each, oh dear my head hurts :frowning:

Well if anyone has go the patience to take a look at this I’d be eternally gratefull. Will be able to pick this up on Monday as escaping the desk over the weekend :smile:

Ciao,
David

2

Is there any chance to get a codepen or jsfiddle set up with this code? It’s a lot less work for us if you would do that (other wise we have to download all the files and set up the test page ourselves.)

Yes I’m lazy :wink: .

4

Took all your CSS files and threw it in the codepen, then I toook your index.html and put it in this codepen.

http://codepen.io/ryanreese09/pen/JoZMjE

Now just add your media queries to display different amount of images in whatever fashion you want. I added in this code.

  #picture-frame img {
    display:inline-block;
    width:23%;
    margin:0 0.5% 0;
  }

Depending on what browsers you want to support, you could use flexbox for this.

5

Hi Ryan, thank you so much for doing this :slight_smile: Is code pen this sort of thing? http://codepen.io/ This looks v useful didn’t know these things existed!

6

Yup that’s exactly it! Great for throwing up a demo and making it easy for us to debug. Also demos, etc.

7

I’ve known that there are some grid generators for drupal cms. Have you used them before? because I am trying and it doesn’t work as I’ve imagined it will…dah…!.
By the way, what Ryan have write worked perfect for me as well! Thank you a lot.

8

Nope - I basically dislike anything that’s not vanilla CSS. I’m a purist.

You’re welcome :slight_smile: .

Edit-oops, Maritha isn’t the OP - my bad! Answered it anyway.

9

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