Menu
Using Pure grids, my website did not respond properly, so I attempted copying and pasting the default responsive grid code into my file, and it still did not function properly.
This is the default code listed on their website:
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>
My full code can be found here. When viewing the following code in a browser, the three sets of dots appear as if they are stacked on top of each other, or at 100% column width. Removing the "pure-u-1" from each class list shows them as if the dots were all very small and on top of each other, literally (not stacked like blocks, since you can only see one set of dots).
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B&W Vending</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>
</body>
</html>
684
I figured it out on my own, after a bit of confusion due to conflicting instructions on the pure-css website. Once I included the following stylesheet, it worked.
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
At one the pure-css grids page it states:
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.
Later on in the page it states seemingly opposite instructions:
Grids is part of the Pure CSS file. However, if you just want Grids and not the other modules, you can pull it down separately.
103
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With