CODEWITHSUNDEEP
yui-pure-css
tomcam
tomcam

Reputation: 5285

Simplest responsive grid fail

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?.

Upvotes: 0

Views: 372

Answers (1)

mechenbier
mechenbier

Reputation: 3067

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/[email protected]/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/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/[email protected]/build/pure-min.css" integrity="sha384-CCTZv2q9I9m3UOxRLaJneXrrqKwUNOzZ6NGEUMwHtShDJ+nCoiXJCAgi05KfkLGY" crossorigin="anonymous">

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

Upvotes: 1

Related Questions