0

Using Pure.css and Pure's grids-responsive.css is there a way to collapse a grid column to a button once it becomes smaller than a certain width?

<div class="pure-g">
    <div class="l-box pure-u-1-3 pure-u-md-1-4 pure-u-lg-1-6">
        <h2>Info area, collapse when screen very narrow, constrain when screen wide</h2>
    </div>
    <div class="l-box pure-u-2-3 pure-u-md-3-4 pure-u-lg-5-6">
        <h2>Main area, greedy</h2>

Also is there a way to keep the column (eg left column above) responsive to screen width but constrain to a fixed maximum width once the screen is very wide?

Don Smythe
  • 9,234
  • 14
  • 62
  • 105
  • can you give me a demo of what do you have? – panagulis72 Feb 07 '16 at 08:46
  • @panagulis see http://codepen.io/hf7dpr/pen/MKPZKL Now that I have removed all CSS dependencies other than pure, the left column only expands to a certain width which is good. But would be good if I could collapse it alltogether to a button when screen is very narrow. – Don Smythe Feb 07 '16 at 12:36

0 Answers0