Issue: Grid laying next to each other #302
Comments
|
Hi, i've posted a new comment to: #301 Please try to set font-size: 0.01% on the .pure-g anf font-size: 1 rem on the RESET-class. Probably this will solve your problem. Use any NOT 0 size font size if you need cross-browser compatibility. Please let us know if this solved your issue. |
|
@josleow can you please provide the most simplified HTML and CSS example code that shows the issue? |
|
I think I have the same issue, with the following code. I might have missed something basic, but I followed the 'getting started' page (even on this page the example with the three 1-3 columns shows the last one on another line) <!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
<div class="pure-u-1-3"><p>Thirds</p></div>
</div>
</body>
</html> |
|
@abondis Tried the code above on FireFox 31 on OSX and it looks fine to me. Here's the JSBin. |
|
@tilomitra I still have the issue, but it seems it's specific to me, and when I unzoom from 100% to 90% it's working correctly. |
|
I've seen a couple examples where a particular zoom level caused grids to render wrong (one box would overflow from the edge of the grid to the next line) in Firefox/Win. I observed this happening at different zoom levels: in one instance, when zooming in a stop; in another, when zooming out two stops. No other browsers, including Mac Firefox, were affected. Reducing the pure-u-1-3 value from 33.3333% to 33.3%, or performing a similar tiny fractional reduction of width, solved the problem. But I don't want to compromise the correct math in Pure to accommodate an occasional render flub for a particular zoom level in a particular browser on a particular platform; it's an edge case. But if you're worried about it, try reducing the width of your pure-u-* units by a tiny amount. |
Two grids (pure-u-1-2) staying inside pure-g should lay next to each other; only Firefox for most grids has different layout as Chrome and Safari. I have one grid at the last floating right. Had to cheat by using firefox hack to reduce width from 50% to 49%. In a long run, it might not be good. I would like to know if there is any other solution? Thanks
The text was updated successfully, but these errors were encountered: