pure-u-1-7 not working when combined with sm,md,lg,xl

Question

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Your page title</title>
  <link rel="stylesheet" href="unpkg.com/purecss@1.0.1/build/pure-min.css">
  <link rel="stylesheet" href="grid.css">
  <link rel="stylesheet" href="unpkg.com/purecss@1.0.1/build/grids-responsive-min.css" />
</head>

<body>
<div class="pure-g">
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7">First Unit</div>
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div> 
    <div class="pure-u-sm-1-1 pure-lg-1-7 ">First Unit</div>
</div>
</body>
</html>

I want a 7 column grid. I can achieve that with Purecss "pure-u-1-7". But when combined with sm,md,lg,xl its not working. Its becoming as one column. I want a 7 column, when its viewed on small device it should become single column. Like this "pure-u-1-7 Pure-u-sm-1-1"

First Unit

First Unit

First Unit

First Unit

First Unit

First Unit

First Unit — Anbhu, Sep 27 '19 at 11:36
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/200070/discussion-between-anbhu-and-wassim-al-ahmad). — Anbhu, Sep 27 '19 at 13:08
You can click Run Code snippet and see your solution not working. While opening itself its showing 1 column. I want 7 column on size more than md. I need help. — Anbhu, Sep 27 '19 at 13:21
You can share the code completely to help you solve the problem Accept my greetings and watch the test video code that you shared in my answer https://www.youtube.com/watch?v=ZNhtM60Z8hY&feature=youtu.be — Wassim Al Ahmad, Sep 27 '19 at 20:21

Wassim Al Ahmad · Answer 1 · 2019-09-28T08:03:33.527

I tested it on Google Chrome and Firefox and it works well I hope this is what you want

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Your page title</title>
 <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
 </head>
 <body>
 <style>
    p {
        text-align:center;
    }
    #mainDiv{
        width:100%;
    }
    #subDiv1{
        width:85.7%;
    }
    #subDiv2{
        width:14.3%;
    }
 </style>
 <div class="pure-g" id="mainDiv">
     <div id="subDiv1" class="pure-u-1-2">
             <div class="pure-g">
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 1</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 2</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 3</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 4</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 5</p>
                 </div>
                 <div class="pure-u-1-6 pure-u-sm-1-6 pure-u-md-1-6 pure-u-lg-1-6 pure-u-xl-1-6">
                    <p>test 6</p>
                 </div>

            </div>
     </div>
         <div id="subDiv2" class="pure-u-1-2 ad">
            <p>test 7</p>
         </div>
 </div>
 </body>
 </html>

No its not equally dividing the browser width into 7 equal columns. — Anbhu, Sep 28 '19 at 06:53
You can do this using CSS and I will modify the answer You have to try the code you have divided the columns on the width of the page — Wassim Al Ahmad, Sep 28 '19 at 08:00

pure-u-1-7 not working when combined with sm,md,lg,xl

1 Answers1