I am using Foundation 4 with the Orbit slider.
I want to use it as a content-slider.
Is it possible to put the rows from foundation in the orbit slider without messing up the margins from Orbit?
<ul data-orbit>
<div class="row">
<div class="large-7 small-12 columns">
<h1>Hallo</h1>
</div>
</div>
<div class="row">
<div class="large-7 small-12 columns">
<h1>Doei</h1>
</div>
</div>
<img src="img/slider/1.jpg">
</ul>
There are 3 slider-items. 2 divs with row classes and 1 full-width image.
This example messes with the margins from the class row.
I want to add margins so the divs with row classes will align in the middle.
I'm not sure I understand your question well, but if you want 3 slides (2 with text on the middle of the large screen and 1 with the image) I think this code should work (however I didn't test it):
If you add the .large-centered classes to the <li> tags, they will align the texts to the middle automatically, and you don't have to care about the margins in css.
<div class="row">
<div class="large-12 columns">
<div class="orbit-container">
<ul data-orbit="">
<li class="row">
<div class="large-7 large-centered small-12 columns"><h1>Hallo</h1></div>
</li>
<li class="row">
<div class="large-7 large-centered small-12 columns"><h1>Doei</h1></div>
</li>
<li><img src="img/slider/1.jpg" alt=""></li>
</ul>
</div>
</div>
</div>
Related
I want to get rid of the gap at the left of my green button on this screenshot. I can't seem to find any way to remove it.
Markup:
<div class="row">
<div class="small-4 medium-5 large-4 columns">
<a class="button" id="enroll_in_mooc" href="#">Enroll in MOOC</a>
</div>
<div class="small-6 medium-5 large-6 columns">
<ul class="small-block-grid-1 large-block-grid-2" id="jason_computing_features_list">
<li id="jason_computing_self_paced">Self-paced</li>
<li id="jason_computing_hours_week">4 hours a week</li>
<li id="jason_computing_assignments">3 Assignments</li>
<li id="jason_computing_challenges">18 Challenges</li>
</ul>
</div>
</div>
aa
By default, Foundation applies a right and left padding to columns. I've created a snippet with a couple of options. You can target the column; or simply create a class and add a rule for left-padding.
/* -- target the first-child column -- */
.row .columns:first-child {
padding-left: 0;
}
/* -- create a class ('button-enroll' for example ) -- */
.button-enroll {
padding-left: 0;
}
<link href="http://cdnjs.cloudflare.com/ajax/libs/foundation/5.4.6/css/foundation.min.css" rel="stylesheet"/>
<div class="row">
<div class="small-4 medium-5 large-4 columns button-enroll">
<a class="button" id="enroll_in_mooc" href="#">Enroll in MOOC</a>
</div>
<div class="small-6 medium-5 large-6 columns">
<ul class="small-block-grid-1 large-block-grid-2" id="jason_computing_features_list">
<li id="jason_computing_self_paced">Self-paced</li>
<li id="jason_computing_hours_week">4 hours a week</li>
<li id="jason_computing_assignments">3 Assignments</li>
<li id="jason_computing_challenges">18 Challenges</li>
</ul>
</div>
</div>
I'll try to ask this here, because on Foundation forums I got no answer.
I'm making a mixed layout and I want to use Equalizer to make the first column and the second column the same height. The catch is that the second column is another grid layout. Inside that second grid, Equalizer works like a charm, but between the first and second column it does nothing. I've searched here and there are a lot of people with similar problems, but I did not found a solution for mixed layout, even with simple jQuery functions.
Anyone can help?
Here's the code:
<div class="row">
<div class="large-12 columns">
<div class="row" data-equalizer>
<!-- first column -->
<div class="large-2 small-2 columns">
<div class="panel" data-equalizer-watch>
<!-- here goes an image -->
</div>
</div>
<!-- second column -->
<div class="large-10 small-10 columns" data-equalizer-watch>
<div class="row" data-equalizer>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
</div>
<div class="row">
<div class="large-12 small-12 columns">
<p class="panel">Longer text</p>
</div>
</div>
<div class="row" data-equalizer>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
<div class="large-4 small-12 columns">
<p class="panel" data-equalizer-watch>Text</p>
</div>
</div>
<div class="row">
<div class="large-12 small-12 columns">
<p class="panel">Longer text</p>
</div>
</div>
</div>
</div>
</div>
I checked on version 5.2.2: you just cannot do this.
I looked at Foundation foundation.equalizer.js file,
this function is simply not suited for equalize an equalizer inside an equalizer.
In 5.2.2 version, at line 30, you can see how it select elements to equalize:
vals = equalizer.find('[' + this.attr_name() + '-watch]:visible')
There is no dinstinction between dom levels, it catches every data-equalizer-watch without looking for any data-equalizer inside a data-equalizer
As I know large-12 class only show stuff on large screen. If I decrease the size like on mobile it won't show anything unless I assign another class small-12
Now I've this code and it's showing large-12 in mobile as well and small-12 on large screen as well.
<div class="row">
<div class="large-12 columns">
<div class="panel">
<img src="design/images/nationalskills_logo.png" />
<img src="design/images/toyota_logo.png" style="float: right;"/>
</div>
</div>
<div class="small-6 columns">
<div class="panel">
<img style="width: 30%;" src="design/images/nationalskills_logo.png" />
<img style="width: 30%;" src="design/images/toyota_logo.png" style="float: right;"/>
</div>
</div>
</div>
Can anyone please help me out.
I want to show larger-12 div on big screens and small-6 only on small screen not on big screen. What is wrong with my code.
12 class only show stuff on large screen. If I decrease the size like on mobile it won't show anything unless I assign another class small-12"
This assumption is totally wrong just see the doc http://foundation.zurb.com/docs/components/grid.html
For image resizing use interchange option.
http://foundation.zurb.com/docs/components/interchange.html
You can use different size classes for coloumns in one single div which hides other class definitions based on size..
<div class="row">
<div class="small-6 large-6 columns">
<div class="panel">
<img data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]" />
<img class="right" data-interchange="[/path/to/default.jpg, (default)], [/path/to/bigger-image.jpg, (large)]" />
</div>
</div>
</div>
With Zurb foundation version 3, if I include the foundation.css file
I'm able to make grids, etc.
With version 4, if I do everything the same way, it does not work.
What am I missing?
If I do everything the same way
There are new classes to use for grids in V4. You cannot just say four columns but instead specify if the columns are for a large or small view/device. So you need to have small-X or large-X where X is the number of columns a div needs to consume. Here's an example:
<div class="row">
<div class="ten columns centered">
<h1>This grid won't work on V4</h1>
<div class="row">
<div class="four columns">
<div class="panel">
<p>Left panel</p>
</div>
</div>
<div class="four columns">
<div class="panel">
<p>Center panel</p>
</div>
</div>
<div class="four columns">
<div class="panel">
<p>Right panel</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="ten columns centered">
<h1>But this will...</h1>
<div class="row">
<div class="small-2 large-4 columns">
<div class="panel">
<p>Left panel</p>
</div>
</div>
<div class="small-4 large-4 columns">
<div class="panel">
<p>Center panel</p>
</div>
</div>
<div class="small-6 large-4 columns">
<div class="panel">
<p>Right panel</p>
</div>
</div>
</div>
</div>
</div>
Notice the combination of small and large on a single div. What it tells you is that the Left panel will only be two columns on small devices (mobile phones) and four columns on large devices such as on a desktop. Similarly, the Right panel will be six columns on small devices and four columns on large devices. You can see the difference by playing with the size of your browser.
To get more information on how the V4 Grid works, go to this page.
I am testing foundation 3 framework and was wondering how i can set a row with five articles.
Does anyone have an idea to fix that?
One solution is to use columns of two and mark the last column as the end.
If your row doesn't have a count that adds up to 12 columns, you can
tag the last column with class="end" in order to override that
behaviour. [source]
<div class="row">
<div class="two columns">
article 1
</div>
<div class="two columns">
article 2
</div>
<div class="two columns">
article 3
</div>
<div class="two columns">
article 4
</div>
<div class="two columns end">
article 5
</div>
</div>
Alternatively if you need to use all the space you can use a block grid:
Block grids are made from a ul.block-grid with #-up styles chained to
it. You control how many you have in your Scss setting file or the
customizer. These are ideal for blocked-in content generated by an
application, as they do not require rows or even numbers of elements
to display correctly.
<ul class="block-grid five-up">
<li>article 1</li>
<li>article 2</li>
<li>article 3</li>
<li>article 4</li>
<li>article 5</li>
</ul>
This should work in Foundation 5 (maybe 3 as well). The trick is to offset the first column and end the last.
<nav>
<div class="row">
<div class="column small-2 small-offset-1">
<a>Link</a>
</div>
<div class="column small-2">
<a>Link</a>
</div>
<div class="column small-2">
<a>Link</a>
</div>
<div class="column small-2">
<a>Link</a>
</div>
<div class="column small-2 end">
<a>Link</a>
</div>
</div>
</nav>
Hope it helps someone, or a future me.