I have a Foundation-specific query and hoped you could help. I have a first row of two columns above a second row. I want the second (righ hand) column of the first row to fall beneath the second row in mobile format. I've looked into push/pull etc but I'm having difficulty switching columns between rows. Any ideas how this can be achieved please?
Thanks,
MK
This is not directly possible in the way you describe via Foundation's Push / Pull, as it is to reorder columns only (not rows and columns).
You could reconstruct your HTML to be just one row (this has other associated problems though), and then use Push / Pull
Or (more simply) employ the Visibility classes to show one row for small only and hide it for medium upwards and the other vice versa:
<div class="row">
<div class="small-12 medium-6 columns">
Top left
</div>
<div class="medium-6 columns show-for-medium">
Top right
</div>
</div>
<div class="row">
<div class="small-12 large-6 columns">
Bottom
</div>
</div>
<div class="row">
<div class="small-12 columns show-for-small-only">
Bottom for small
</div>
</div>
This example in a jsfiddle.
Related
<div class="row align-middle">
<div class="small-4 columns">
<div></div>
</div>
<div class="small-4 columns">
<div></div>
</div>
<div class="small-4 columns">
<div>I want to be on the right edge of the parent .row</div>
</div>
</div>
I have the above.
I want the div that's in the third .columns div to be aligned to the right (so that it would look the same as if I put text-align: center on the third .columns div).
I know a way to do so - by putting another .row div inside that column and giving that .row another class of align-right and putting then another .columns inside of that row - but this would result in an unnecessary amount of HTML and I assume Foundation must have provided me a way (another CSS class that I can't find in the docs) of achieving my goal without further HTML than is above.
How do I do this? Or do I have to put another row and column inside that third column?
.columns doesn't have display: flex so I can't put align-right on the column - won't work. Or are .columns meant to have display:flex and I'm just experiencing a bug or otherwise an issue I've possibly created somewhere?
Thanks
if you are using the 6.5 version of foundation, then the following replacements in code would do what you expect
<div class="grid-x">
<div class="small-4 cell">
<div></div>
</div>
<div class="small-4 cell">
<div></div>
</div>
<div class="small-4 cell">
<div>I want to be on the right edge of the parent .row</div>
</div>
</div>
But if you really don't want to use the grid-xy classes, then you can keep your code and use instead foundation 5.5. I hope this helps!
i have a problem with Foundation. I have four containers where to of them is shown as sidebar on the right on bigger screens. On smaller screens I want to weave them into the other content. My sections are as follows:
`<section class="column medium-8">
</section>
<aside class="column small-12 medium-4 authorDetails">
</aside>
<section class="column medium-8 small-12 shouldBeOnBottomOnSmall">
</section>
<aside class="column small-12 medium-4 authorDetails helloThere">
</aside>`
aside.helloThere gets pushed next to section.shouldBeOnBottomOnSmall on bigger screens. How can i fix that?
The columns work great for adding widths to your layout but you need rows to make it stay in place. The row is a wrapper for your columns.
<div class="row">
<section class="medium-12 columns">
http://codepen.io/rafibomb/pen/jPNRVK
BTW - if you are using tags, make sure you have a heading inside it.
While going through Foundation 5 samples and the index.html packaged with the zip, I see that many times there'll be markup like this:
<div class="large-4 medium-4 columns"> ... </div>
Once you have medium-4, won't that be inherited for larger displays as well?
Along the same lines, sometimes there will be:
<div class="large-12 columns"> ... </div>
Is that really necessary? Doesn't a column by default take up 12 columns?
Yes, because Foundation is a mobile-first framework, any larger class will inherit the number of columns from the smaller classes.
An example of why you may want to specify small-X medium-X large-X, etc. is when using those classes in combination with visibility. Let's say we have three columns in a large display, e.g.
<div class="small-12 medium-6 large-4 columns">
COLUMN #1 with stuff that shows in a small, medium, or large width screen.
</div>
<div class="medium-6 large-4 columns show-for-medium-up">
COLUMN #2 with stuff that shows in a medium or large width screen.
</div>
<div class="large-4 columns show-for-large-up">
COLUMN #3 with stuff that shows in a large width screen only.
</div>
For a medium width screen when COLUMN #3 is hidden, you'll want COLUMN #1 and COLUMN #2 to have the class medium-6. And for a small width screen when COLUMN #2 and COLUMN #3 are hidden, you'll want COLUMN #1 to have class small-12.
Hope this helps!
I'm working with Foundation 5, none of my own custom styles. I'm linking, in order, app.css, modernizr.js, jQuery, Fastclick, and foundation.min.js.
I have followed instructions in my tutorial ("Lynda: Up and Running With Foundation") and on the Zurb website for creating a nested row, but there's a problem: the last cell in the row always jumps itself over by a small amount, throwing off not just the text flow but the entire page layout. On mobile devices, this small nudge means that the page can be swiped side to side.
Here's a screenshot of what I'm talking about.
My HTML is
<div class="row">
<div class="large-6 columns panel callout">
<h2>Our Mission</h2>
...text...
</div>
<div class="large-3 columns">
<h3>We're Awesome.</h3>
text
</div>
<div class="large-3 columns">
<h3>Buy From Us!</h3>
text
</div>
<div class="row">
<div class="large-3 columns">
<h3>Good Products?</h3>
text
</div>
<div class="large-3 columns">
<h3>"Licensed"</h3>
text
</div>
</div>
</div>
What have I done wrong? I can't see any information on Google or StackOverflow about this, I've gone over the code carefully, I've torn it down and rewritten it from scratch following code samples... I just don't get what I've missed.
So, although using large-3 columns approximates the correct output you need a little bit different structure. There are many ways to do things, but the thing to remember, is that if you are using a grid or a nested grid, all the columns must add up to 12 columns total. In your case you have a nested grid that adds up to 6. This will give you inconsistant output unless you intent for part of the column to be empty. In that case you can use the .end presentational class to force it to float left.
Here is a set of nested grids that approximates what I think you are going for.
<div class="row">
<div class="large-6 columns panel callout">
<h2>Our Mission</h2>
text
</div>
<div class="large-6 columns">
<div class="row">
<div class="large-6 columns">
<h3>We're Awesome.</h3>
text
</div>
<div class="large-6 columns">
<h3>Buy From Us!</h3>
text
</div>
</div>
<div class="row">
<div class="large-6 columns">
<h3>Good Products?</h3>
text
</div>
<div class="large-6 columns">
<h3>"Licensed"</h3>
text
</div>
</div>
</div>
</div>
I'm using the Foundation 5 framework and am trying to solve an issue I'm having. Let's say I've got a layout like so.
<div class="row">
<div class="large-15 columns">
<div class="large-9 columns">
</div>
<div class="large-6 columns">
<div class="large-3 columns">
<p>stuff</p>
</div>
<div class="large-3 columns">
<p>stuff</p>
</div>
</div>
</div>
</div>
How can I stop the .large-3 columns from nesting? I want each .large-3 column to take half of its parent column (.large-6). Is this possibly, or am I doing it wrong?
First off, Foundation grids are 12 units wide, so unless you have built a custom grid, and written custom CSS for it, large-15 isn't going to mean anything.
That being said, this will split the right hand column neatly in half, using a 12-unit grid. Every row in the grid has to add up to 12, no matter how deeply it is nested. If you laid out the necessary structure for a 15-unit grid, the same principle would apply, although it would be much more difficult to split things in half.
<div class='row'>
<div class='large-12 columns'>
<div class='large-7 columns'>
<p>stuff</p>
</div>
<div class='large-5 columns'>
<div class='large-6 columns'>
<p>stuff</p>
</div>
<div class='large-6 columns'>
<p>stuff</p>
</div>
</div>
</div>
</div>
I think you need block grid. http://foundation.zurb.com/docs/components/block_grid.html.
If you create block grid using class "small-block-grid-2" and with two "li" then both li will take half of the available width.
Also I show your last comment, if you don't need margin then add collapse class to "row" div.
I hope this helps.