I have two rows and inside each one three large columns and only one that reamains visible on medium breakpoint. What I want is to have them float next to each other on medium while breaking to different rows on large and retaining their properties(background and height)? Also I want the second row to be grouped in div, not necessary with the class of row because what if that div is footer and I care for semantics.
Here is my first pen with two rows separated and it works as expected but not desired, not allowing divs to float next to each other on medium:
two separate rows, case one
html and css for case one:
<body>
<div class="row">
<div class="biggest columns large-4 show-for-large-up">row1 height100</div>
<div class="average columns medium-6 large-4">row1 height50</div>
<div class="smallest columns large-4 show-for-large-up">row1 height25</div>
</div>
<div class="row">
<div class="biggest columns medium-6 large-4">row2 height100</div>
<div class="averge columns large-4 show-for-large-up">row2 height50</div>
<div class="smallest columns large-4 show-for-large-up">row2 height25</div>
</div>
</body>
/* css for case no.1 */
.row:first-of-type{background:red;}
.row{background:blue;}
/* different height for divs inside row */
.biggest{height:100px;}
.average{height:75px;}
.smallest{height:50px;}
and this is pen no.2:
row inside row, second case, the following css and html code for case no.2:
<body>
<div class="row">
<div class="biggest columns large-4 show-for-large-up">row1 height100</div>
<div class="average columns medium-6 large-4">row1 height50</div>
<div class="smallest columns large-4 show-for-large-up">row1 height25</div>
<div class="row">
<div class="biggest columns medium-6 large-4">row2 height100</div>
<div class="averge columns large-4 show-for-large-up">row2 height50</div>
<div class="smallest columns large-4 show-for-large-up">row2 height25</div>
</div>
</div>
</body>
css from code no.2 remains the same like in first example:
.row:first-of-type{background:red;}
.row{background:blue;}
/* different height for divs inside row */
.biggest{height:100px;}
.average{height:75px;}
.smallest{height:50px;}
This second example works correct partially. On the medium size code works ok (height of the elements are being respected but on the large size foundation has rule for .row .row that adds negative side margins, but the bigger problem is vertical alignement of floated elements which takes precedence over horizontal alignement displaying my inner row rather ugly. How can I fix this?
I removed blue div for simplicity. First part is just a normal layout, and it breaks on large, float on medium:
http://codepen.io/zlajaa1/pen/qdWLmd
<body>
<div class="row">
<div class="biggest columns medium-4 large-12">row1 height100</div>
<div class="average columns medium-4 large-12">row1 height50</div>
<div class="smallest columns medium-4 large-12">row1 height25</div>
</div>
</body>
Now I didn't quite understand what do you want here. Should the medium size float, and on large screens to have them (divs) collapsed or you want to delete some of them, coz I noticed
<div class="averge columns large-4 show-for-large-up">row2 height50</div>
show-for-large-up class, that removes divs that has it on medium sizes.
Related
When do yo use row column construct in Zurb Foundation 6.2.3 framework?
<div class="column row">
Row column
</div>
It almost identical to,
<div class="row">
Row
</div>
Only that row column is shorter in length.
This has to do with the way framework grids work (not only foundation), .row elements are not meant to be content containers itself, .column are. Grid elements has paddings and margins and, if you use just .row, that would cause misalignment with other elements on the grid. So, if you have something like:
<div class="row">
<div class="column medium-6">Column A</div>
<div class="column medium-6">Column B</div>
</div>
<div class="row">
<div class="column">Column C, full width always</div>
</div>
<div class="row">
<div class="column medium-6">Column D</div>
<div class="column medium-6">Column E</div>
</div>
Please take a look to the Column C, as it is full width on all breakpoints, doesn't need to have sizing classes, so just "column" or "columns" will suffice, but it still having an extra div with no other need than having the proper sizing/padding/margin to keep content alignment to upper and lower row, so... it's better if second row is: <div class="row column">Column C, full width always</div>, just that.
That's the situation in which you should use the row column construct; and yes, I do encourage you to use that construct, avoid use .row as direct content container.
Hope this helps.
I have a Semantic UI grid with an "odd" number of columns per row:
<div class="ui grid">
<div class="seven column row">
<div class="column">ABC</div>
<div class="column">DEF</div>
<div class="column">GHI</div>
<div class="column">JKL</div>
<div class="column">MNO</div>
<div class="column">PQR</div>
</div>
I would like the "PQR" cell to span two non-standard-sized columns (the last two).
Using "column two wide" does not work.
Can anyone tell me how to do this?
Semantic-UI uses a 16 column grid by default. You can change this for the purpose of your web app by adjusting the theming variables.
If you would not like to play around with that, you can use only 14 of the 16 columns and center align the grid to have equal space on both left and right side.
Example: https://jsfiddle.net/batrasoe/nnpxgmaq/
<div class="ui center aligned grid">
<div class="row">
<div class="two wide column">ABC</div>
<div class="two wide column">DEF</div>
<div class="two wide column">GHI</div>
<div class="two wide column">JKL</div>
<div class="two wide column">MNO</div>
<div class="four wide column">PQR</div>
</div>
</div>
This uses 2+2+2+2+2+4 = 14 columns
Using something like <div class="seven column row"> gives the columns equal width. This is why your two wide column wouldn't work - as it conflicts the equal width property by saying make the column 2/16 of the width of grid.
I have a Foundation framework grid and I have set 2 columns in one row. I am experiencing an unwanted line break from the first column into the next. The problem exists on a "large" screen size. The first column is a "large-2" and the second is a "large-4 large-centered" and for some reason, the image in the second column seems to be below a line break from the first column h2 element, rather than in line, as it should be. Surely the contents of each column should be aligned with the top of the row unless otherwise stated?
Here's the codepen
You need to remove "large-centered" class from the second column for the "line break" to disappear, or put second column in its own row. There could be only one CENTERED column per row, see Grid docs.
<div class="row">
<div class="small-3 small-centered columns">3 centered</div>
</div>
<div class="row">
<div class="small-6 large-centered columns">6 centered</div>
</div>
<div class="row">
<div class="small-9 small-centered large-uncentered columns">9 centered</div>
</div>
<div class="row">
<div class="small-11 small-centered columns">11 centered</div>
</div>
I want the background of a row full width and the content within it a standard width row.
I'm attempting to do this by created a expanded width row, applying a background to it and nesting a standard row inside it. However the nested row is full expanded width despite not having the expanded class.
Here is my attempt
<div class="row">
<div class="small-2 large-4 columns"><!-- ... --></div>
<div class="small-4 large-4 columns"><!-- ... --></div>
<div class="small-6 large-4 columns"><!-- ... --></div>
</div>
<div class="row expanded">
Expanded row
<div class="row">
<div class="large-12">Nested Row</div>
</div>
</div>
http://codepen.io/onlyslightly/pen/beqZwo
Is there a way to nest standard width rows inside expanded width rows? Or is there a more appropriate way to perform this action?
This is a known issue that was introduced in Foundation 6.2.1:
https://github.com/zurb/foundation-sites/issues/8886
As you can see in 6.2.0 the inner row works fine:
http://codeply.com/go/UfbFrTyThU
The issue is still open, but you can workaround it using some extra CSS...
.row .row {
max-width: 75em;
}
http://codeply.com/go/vyjVAwXkn4
I need to build a pyramid of content blocks using the Foundation grid.
The problem is that for rows that are not divisible by 12, I cannot stack the next row in the pyramid so that it is centered under the row above it.
It is like I need a half column offset or something equivalent.
I thought about using .centered on a nested row, but that seems to have the same problem of dividing half columns.
<div class='row'>
<div class='small-1 small-centered columns'>1</div>
</div>
<div class="row">
<div class='small-5 columns'></div>
<div class='small-1 columns'>1</div>
<div class='small-1 columns'>2</div>
<div class='small-5 columns'></div>
</div>
<!--- This row with 3 content blocks is not centered below the previous row --->
<div class="row">
<div class='small-4 columns'></div>
<div class='small-1 columns'>1</div>
<div class='small-1 columns'>2</div>
<div class='small-1 columns'>3</div>
<div class='small-3 columns'></div>
</div>
Fiddle:
http://jsfiddle.net/1cq1gqtq/
I would use block grid instead. The block grid utility will fill up whatever available space is created by the row above.
See the Foundation docs for examples of how to use it: http://foundation.zurb.com/docs/components/block_grid.html
I use this a lot when I need no padding on the left/right sides of the outer columns.