I have a webpage based on a susy grid, with content like this:
<div class="container">
<div class="column-gallery-item">
<p>Who's down there? Can't see!</p>
</div>
<div class="column-gallery-item">
<p>Lots<br>and lots<br>and lots<br>of content</p>
</div>
<div class="column-gallery-item">
<p>Not much here</p>
</div>
<div class="column-gallery-item">
<p>I want to move up!</p>
</div>
</div>
Each div spans 4 columns of a 12-column grid. The first three divs appear in a single row, the last div moves to the next row - see http://codepen.io/anon/pen/meGJVp .
Now I need the last div to move up, directly below the first one. How can I do so?
If you want the item to stack underneath the first item in the grid then the only way is to nest it in the same column:
<div class="column-gallery-item-stacked">
<div class="nested-column-gallery-item">
<p>Who's down there? Can't see!</p>
</div>
<div class="nested-column-gallery-item">
<p>I want to move up!</p>
</div>
</div>
See here: http://codepen.io/anon/pen/QjVjMK
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>
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 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 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.
I am striping alternate rows of ui-blocks in jQuery Mobile. There are three columns, but when a cell on a row contains a different number of wrapped lines than its neighbor the background color only fills in the lines that are occupied.
For example ui-block-a (1 line), ui-block-b (2 lines), ui-block-c (2 lines). If this were a striped row block b and c would show 2 lines of text with the background color. block A shows a blank line after the line of text to keep the heights consistent but unfortunately the background color for the stripe only shows on the first line for block-a.
Here is the CSS and the HTML
CSS
.stripe {
background-color: #EAEAEA;
}
HTML
<div data-role="content">
<div class=ui-grid-b>
<div class=ui-block-a><strong>First Name</strong></div>
<div class=ui-block-b><strong>Last Name</strong></div>
<div class=ui-block-c><strong>Organization</strong></div>
<div class="ui-block-a stripe">Allison</div>
<div class="ui-block-b stripe">Akhnoukh</div>
<div class="ui-block-c stripe">Education Consultant</div>
<div class=ui-block-a>Kemi</div>
<div class=ui-block-b>Akinsanya-Rose</div>
<div class=ui-block-c>New York City Department of Education</div>
</div>
</div><!-- /content -->
Yea it's too bad there is no row class, similar to what you would have in Bootstrap. With that being said, perhaps you can float another div as a wrapper around your block items like this:
<div class=ui-grid-b>
<div style="float:left;width:100%">
<div class=ui-block-a><strong>First Name</strong></div>
<div class=ui-block-b><strong>Last Name</strong></div>
<div class=ui-block-c><strong>Organization</strong></div>
</div>
<div style="float:left;width:100%">
<div class="ui-block-a">Allison</div>
<div class="ui-block-b">Akhnoukh</div>
<div class="ui-block-c">Education Consultant</div>
</div>
<div class="stripe" style="float:left;width:100%">
<div class=ui-block-a>Kemi</div>
<div class=ui-block-b>Akinsanya-Rose</div>
<div class=ui-block-c>New York City Department of Education</div>
</div>
</div>
Example Fiddle found here