Simplest responsive grid fail

Question

I am trying to create a responsive grid with a single column containing two adjacent boxes. ⅓ columns on the left and ⅔ columns on the right. Here's the non-responsive version on codepen at http://codepen.io/htmlcheats/pen/OWMobO:

<div class="pure-g">
    <div class="pure-u-1-3" style="background-color: red; height: 10em;">
        Box 1 - 33.3% width uses pure-1-3 style
    </div><!-- .pure-u-1-3 -->
    <div class="pure-u-2-3" style="background-color: teal; height: 10em;">
        Box 2 - 66.6% width uses pure-2-3 style
    </div><!-- .pure-u-2-3 -->      
</div><!-- .pure-g -->

It works as expected. When I squish them together or stretch them they remain adjacent.

Here's the responsive version (codepen at http://codepen.io/htmlcheats/pen/OWMobO):

<div class="pure-g">    
    <div class="pure-sm-md-1-3 pure-u-md-1-3 pure-u-lg-1-3 pure-u-1" style="background-color: red; height: 10em;">
        Box 1 - 33.3% width uses pure-1-3 style
    </div><!-- .pure-u-1-3 -->
    <div class="pure-sm-md-2-3 pure-u-md-2-3 pure-u-lg-2-3 pure-u-1" style="background-color: teal; height: 10em;">
        Box 2 - 66.6% width uses pure-2-3 style
    </div><!-- .pure-u-2-3 -->  
</div><!-- .pure-g -->

When I squash the page they still remain atop each other. If I understand correctly they should collapse and create a single column with the red box standing on top of the teal one.

Can you tell me what I'm doing wrong?.

score 1 · Accepted Answer · answered Jan 12 '17 at 18:38

Your two codepen links in your question (the unresponsive and responsive one) are the same - they both link to the unresponsive version of your example, but I found what I believe was your responsive example.

Anyway, to enable responsive grids in purecss, you have to include the separate responsive grids CSS file as well as the base purecss file. From the responsive grids documentation:

Since media queries cannot be over-written, we do not include the grid system as part of pure.css. You'll have to pull it in as a separate CSS file. You can do this by adding the following tag to your page.

<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
<!--<![endif]-->

I took the responsive version of your pen and added the links to the responsive CSS files (code block above) and it works as expected. At the end of the day, your CSS links should look like this:

<!-- base purecss file -->
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">

<!-- purecss responsive grids -->
<!--[if lte IE 8]>
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/grids-responsive-min.css">
<!--<![endif]-->

I swear I went over the documentation about 235 times. I appear to be a liar. And sorry about the duped link. Spent a lot of time on the question; don't know why the brain fart. I wish there was some kind of Donate or Tip mechanism to thank you. I guess I'll just have to say.. thank you. — tomcam, Jan 12 '17 at 23:16

Simplest responsive grid fail

1 Answers1