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>
Related
I have the following footer that is broken to 2 part: an upper part and a lower part:
The upper part of the footer contains 4 divs and its css has:
display:flex;
justify-content:space-between;
While the lower part contains 3 divs (1 is completely empty) and also its css has:
display:flex
justify-content:space-between;
What I want is to make the unordered list that starts with TERMS & CONDITIONS in the bottom part of the footer to start just under the unordered list that ends with BEST PLAYERS in the upper part of the footer, so along this red line:
The best way to do this, is to rearrange you html code: Instead of making two rows footer, make it one row with two columns, the first column is for the logo and the second column divided into two rows as well, with three columns
<div class="row">
<div class="col-3">
<div class="logo">
<img src="your-logo.png" alt="logo">
</div>
</div>
<div class="col-9">
<div class="row">
<div class="col-4">fixtures</div>
<div class="col-4">latest tweets</div>
<div class="col-4">follow</div>
</div>
<div class="row">
<div class="col-4">blank</div>
<div class="col-4">terms & privary</div>
<div class="col-4">social icons</div>
</div>
</div>
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 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.
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.
I have a row divided into 3 columns using col-sm-4. Now i expect this row to be divided horizontally into three parts. But it's divided vertically.
See on Jsfillde
Here's my code
<div class="container">
<div class="row" style="padding:13px 15px;">
<div class="pull-left span4">
<img src="themes/custom/img/logo.png" width="120" alt="logo"/>
</div>
<div class="pull-right span4">
<div class="row">
<div class="col-sm-4">One</div>
<div class="col-sm-4">Two</div>
<div class="col-sm-4">Three</div>
</div>
</div>
</div>
</div>
I have kept a logo on the left side and on the right side there is a row that i want to divide horizontally in 3 parts.
What am i doing wrong?
Your code works just fine. The .col-sm-* classes are applied for width 768px and above. If you want make this three divs always horizontally, you have to use classes .col-xs-4 in your case. Updated jsfiddle
Futher reading - http://getbootstrap.com/css/#grid-options
I was having the same problem and was at my wits end. Then I refreshed the browser and it worked.