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.
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!
Im currently using Foundation 6.3.1 and stuck on overriding nesting column to full container width.
Here is what I am trying to do:
<div class="row container">
<div class="column small-8">
<div class="row">
<div class="column standard">
Standard content
</div>
</div>
<div class="row expanded">
<div class="column full">
Full screen width content
</div>
</div>
<div class="row">
<div class="column standard">
Standard content
</div>
</div>
</div>
</div>
https://codepen.io/maca1016/pen/QgobrJ
I need the "Full screen width content" area expanded to full width of the browser window. If possible I want to achieve this through the framework. Rather not use position: absolute; for solution.
I think you need to override the container's width declaration for this section, and force the content to be larger than it's container. I forced it with an inline style and it worked in the pen, but you may want to clean it up and add a class for this, or an ID if it is just a one off use.
<div class="row expanded">
<div style="width:150%!important;" class="column full">
Full screen width content
</div>
</div>
https://codepen.io/anon/pen/JJzJQv
Is there any special reason for that .row.container wrapping it all?, I think the solution is clearly taking the items you need full width (the .row.expanded and its children) out of that container, without making adding anything else.
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 have a very simple code with Foundation CSS
<div class="row">
<div class="large-offset-1 large-6 columns">Content goes here</div>
<div class="large-4 end columns">Side goes here</div>
</div>
I want there to be margins between the columns. Currently, there is only padding. So if I add background-color to these columns, then they stick to each other.
Doesn't Foundation provide a solution for this?
try this (it makes a full width div inside the other, automatically adding margins)
<div class="large-4 medium-6 small-12 columns">
<div class="large-24 columns">
... content ...
</div>
</div>
You could try this:
<div class="row">
<div class="large-offset-1 large-6 columns padded-column">
<div class="column-content">Content goes here.</div>
</div>
<div class="large-4 end columns padded-column">
<div class="column-content">Side goes here</div>
</div>
</div>
Then, for styles:
.padded-column {
padding: 10px;
}
.column-content {
background: red;
}
I had a similar issue that couldn't be resolved with padding. Since Foundation 5 isn't IE8 compatible, I just used calc eg. width: calc(50% - 10px);
I'm using the CSS Framework Foundation and when I write the following code:
<div class="row">
<div class="two mobile-one columns"><label for="invoiceterm-summary" class="right inline">Become late <span class="required">*</span></label></div>
<div class="ten mobile-three columns"><input class="one" id="invoiceterm-late" name="invoiceterm[late]" type="text" value=""> days after invoice sent</div>
</div>
I get this :
But I want to display the text "days after invoice sent" like this:
You should place all of these elements into a single:
<div class="row">
<div class="twelve mobile-four columns"></div>
</div>
Otherwise it is behaving correctly, stacking the columns as the screen size is reduced.
I had to remove the display: block property from the css definition of the input[type="text"] on the foundation.css file