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
Related
I'm trying to make 3 columns in a row equal height. I used row-equal-height, but nothing happens.
Here is my code:
<div class="row row-eq-height">
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Assisted-Living.jpeg" />
<div>
<h2>Assisted Living</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/assisted-living.png" />
Bridging the gap between seniors needing some help and being unable to care for themselves is the purpose of assisted living facilities...
...
</div>
</div>
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Memory-Care.jpeg" />
<div>
<h2>Memory Care</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/memory-care.png" />
Enhancing the life of seniors with memory impairment (due to Alzheimer’s, dementia, or aging) is to specifically enhance the dignity and well-being of each resident...
</div>
</div>
<div class="col-lg-4 content-block">
<img src="../wp-content/themes/understrap-child/img/Independent-Living.jpeg" />
<div>
<h2>Independent Living</h2>
<img class="icon" src="../wp-content/themes/understrap-child/img/icons/independent-living.png" />
Engaging in a fulfilling lifestyle is so much more than where you live...
</div>
</div>
Here's the website in progress: https://ciminocarestg.wpengine.com/
It's the column of 3 under the hero (Assisted Living, Memory Care, and Independent Living) that I want to make equal height.
Thank you!
Thanks for sharing the visuals.
Your row-eq-height is working, but is just so happens that your content, within each column, is inside a nested child div element that is not impacted by row-eq-height.
For a quick and easy way to solve the issue, especially if your content is finalized, then add this CSS rule to your site...
.home .content-block div {
min-height:425px;
}
In the future, do either of the following:
If the content in any of your 3 columns expands, just simply adjust that min-height value.
If you don't want to depend on this technique, then pull out the nested divs that are in each column, so that the content is only 1 level deep, not 2.
In either case, UnderStrap is still an excellent choice for a theme and utilizing BootStrap.
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;
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 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.
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.