I'm trying to integrate purecss with a project I've been working on.
It was just borking my layout for some reason, so I tried to create an extremely primitive template (below), and I'm just getting funny letter spacing. What is going on?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.2.0/pure-min.css">
</head>
<body>
<div class="pure-g-r">
<div class="pure-u-2-4">
<p>Left side.</p>
</div>
<div class="pure-u-2-4">
<p>Right side.</p>
</div>
</div>
</body>
</html>
JSBin showing issue:
http://jsbin.com/ubarag/1/edit
My code appears to be correct when looking at examples, so I must be doing something really obvious/stupid...
Edit:
Appears to be linked to these two issues, except none of the work-arounds in the comments are working for me.
The class pure-u-2-4
is not recognized by Pure. Instead, use the class pure-u-1-2
to get columns with 50% width:
<div class="pure-g-r">
<div class="pure-u-1-2">
<p>Left side.</p>
</div>
<div class="pure-u-1-2">
<p>Right side.</p>
</div>
</div>
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