Is align-right deprecated in Zurb Foundation 6?
<div class="grid-x grid-margin-x align-right">
<div class="medium-4 cell">Our Content</div>
<div class="medium-4 cell">More Content j</div>
</div>
is not aligning the cells to the right,
Seems like it works as expected here: https://codepen.io/rafibomb/pen/QzwGYO
If you want the cells to shrink, you can add the .shrink class to each cell instead of medium-4
Make sure you have the XY grid enabled in app.scss as well as
#include foundation-flex-classes;
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!
Doesnt seem to work. Is there a fix? It seems readmore is expecting sections and artcles; however, foundation uses divs i.e. row and columns. How to fix?
You can use any HTML5 tag with Foundation's grid. The default grid uses Flexbox, no floats and the styles are class based, not tag based.
Example:
<article class="grid-x grid-margin-x">
<div class="section medium-4 cell">
<!-- your content -->
</div>
</article>
I'm following Foundation 6 documentation to create an off canvas menu : http://foundation.zurb.com/sites/docs/off-canvas.html
Here is what I did :
<body>
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div class="off-canvas position-left" id="offCanvasLeft" data-off-canvas>
<ul class="vertical menu">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
</div>
<div class="off-canvas position-right" id="offCanvasRight" data-off-canvas
data-position="right"></div>
<div class="off-canvas-content" data-off-canvas-content>
<div class="title-bar">
<div class="title-bar-left">
<button class="menu-icon" type="button" data-toggle="offCanvasLeft"></button>
<span class="title-bar-title">Zurb</span>
</div>
<div class="title-bar-right">
<button class="menu-icon" type="button" data-toggle="offCanvasRight"></button>
</div>
</div>
</div>
</div>
</div>
</body>
But when I open the menu, here is what I get :
I can scroll it and see my test1/2/3/4, but why do I have this result?
What I want is the same as what we can see on foundation documentation when you click on 'Toggle Off-canvas'
Did I put my list in the wrong place?
I'm pretty sure my framework is up to date, and I've been following the documentation step by step, but it does not give as much informations as I would like to have
You have the menu in the right place and your example is equivalent to the examples provided in the Foundation 6 documentation.
This seems to be a bit of a design issue where the length of the Off Canvas menu is dependant on the size of the content. Because you have no content on the page, the menu is equal in height to the menu bar.
As soon as you populate off-canvas-content, the menu should appear as expected.
Click Here for a Demo.
Thank you for sharing your code. It is slightly different than the examples by ZURB for the Foundation 6 starter pages. ZURB uses "wrap" instead of "wrapper". I changed my code to match yours and voila! Their tutorial is at:
http://foundation.zurb.com/sites/docs/v/5.5.3/components/offcanvas.html
Yours:
<div class="off-canvas-wrapper">
<div class="off-canvas-wrapper-inner" data-off-canvas-wrapper>
ZURB:
<div class="off-canvas-wrap" data-offcanvas>
<div class="inner-wrap">
I'm setting up a new project with Zurb foundation. I have a problem in that I want a couple of css classes to have different font-sizes to the rest of the site but doing that makes the row reduce it's width.
So
.boxed {
font-size:0.8em; // or font-size:12px causes the same issue
}
<div class='row'>
<div class='large-12 columns'>
stuff goes here
</div>
</div>
<div class='row'>
<div class='row boxed'>
More stuff here, smaller font-size
</div>
</div>
The second row is a lot narrower than the first just because I've applied the .boxed class to it.
Any ideas on best practice for this in zurb foundation?
Many thanks
I have the following code:
<div class="row">
<div class="large-12 columns">
<div class="item">ITEMS GO HERE</div>
<div class="item">ITEMS GO HERE</div>
... many .item here ...
</div>
</div>
Each .item would have a fixed width, say 150px. I want the div large-12 to be scrollable if there are more .item that it can fit within the current screen. How can I do that? Currently, if I add too many .item, then they go to the next line!
Thanks
You'll need to add an overflow-x:scroll; and white-space:nowrap; to the parent container. And a display:inline-block; to the .items.
Here's a working demo.