1

Fiddle

I'm trying to make a responsive grid, that shows 2 items per row on bigger screens and only one on smaller screens.

Now I found out you can do this with Pure.css, but I have the correct syntax and it's not working.

The items just stay on the same line till they're on each other.

<div class="pt-holder pure-u-1-2 pure-u-md-1-1">                    
    <img src="Images/pt/mikko.jpg" alt="Mikko Paavola" />
        <h3>Mikko Paavola</h3>              
        <span> 
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi laoreet dapibus quam, sit amet tempor felis egestas et. In eu metus ultrices, 
            luctus nunc egestas, euismod magna.
            ...
Claudio
  • 884
  • 1
  • 15
  • 31
  • Hi. I guess I'm being impatient, but I was curious if you had a chance to look at my answer. Thanks. – macguru2000 Dec 04 '14 at 21:55
  • @macguru2000 Hi. I actually had a chance but was busy with another project where this isn't relative anymore. But I'll check it out once I have time :) – Claudio Dec 05 '14 at 06:58

2 Answers2

1

I've forked your Fiddle and added the necessary grids-responsive-min.css for modern browsers and tweaked your html/css. It now works, check it out at http://jsfiddle.net/macguru2000/pkfsoavg/

I had to remove the css rules for .pt-holder since pure grid's divs should not have any custom rules applied. Also I removed the 20% padding on .pt-holder span, it was offsetting the text under the photograph. I also swapped your responsive grid settings, pure-u-1-1 pure-u-md-1-2. It just made more sense to me to have wide monitors show two columns and narrow monitors show one.

But... you can easily go back to wide monitors having one col and narrow monitors having two by swapping your pure grid class back to pure-u-1-2 pure-u-md-1-1.

So you know, one must include the pure responsive grids css file, the html snippet below can be used to include the core pure.css and responsive grids (both modern browsers and old IE)

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
<!--[if lte IE 8]>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">
<!--<![endif]-->
macguru2000
  • 2,042
  • 2
  • 18
  • 27
-6

One of the reasons I dislike 3rd party tools like Pure is that if you have a question, only other users of the tool can answer it! Another way is to do it yourself, which is reasonably easy. There are several good explanations of how to set up your own grid around; try the one at http://www.responsivegridsystem.com/.

GuyH
  • 786
  • 1
  • 4
  • 8
  • 2
    This should be a comment, not an answer. – Claudio Oct 13 '14 at 11:30
  • 1
    Sorry, but when I added the above I didn't have enough credit for the system to let me comment (that seems to have changed today). But I was offering an answer - instead of using Pure (where only other (possibly quite few) users can help), instead go down the do-it-yourself route, and I gave a reference to an explanation showing how to do that. – GuyH Oct 14 '14 at 11:58
  • 2
    Sorry to hear you don't have enough credit, but opinions don't usually work as good answers. Also, pure.css has an extremely informative website (http://purecss.io) that will teach you everything you need to know. After all, pure.css isn't really that big or complex. – macguru2000 Dec 03 '14 at 23:23