I am trying to create footer navigation. I followed a video from Gary Jennings. I copied everything that he did in both HTML and CSS. My footer is not aligning horizontally but in a column stacked on top of each other. I need my footer to have 3 columns set next to each other.
This is what one of the sections or "columns" looks like in the code.
code view
website view
Try Equalizer as in the Zurb Site Docs:
<div class="grid-x grid-margin-x" data-equalizer data-equalize-on="medium" id="test-eq">
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src= "assets/img/generic/square-1.jpg">
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<p>Pellentesque habitant morbi tristique senectus et netus et, ante.</p>
</div>
</div>
<div class="cell medium-4">
<div class="callout" data-equalizer-watch>
<img src= "assets/img/generic/rectangle-1.jpg">
</div>
</div>
</div>
Related
I'm using the grid-xy system and I'm attempting to change the gutter width of Foundation 6 with my settings.scss file but I'm having no luck. My ultimate goal is to have the gutters between my cells to be 20px wide instead of 15px. I tried changing any variable I could think of or find in my research. Below is a list of variables I've tried.
$grid-column-gutter: (
small: 30px,
medium: 45px,
);
$column-gutter: rem-calc(20);
$gutters: rem-calc(20);
$gutter: rem-calc(20);
$grid-margin-gutters: rem-calc(20);
I know for sure my _settings.scss is working though because I was able to change $global-width and it did have an effect.
Here is the html I'm using
<div class="grid-x grid-padding-x grid-container">
<div class="cell large-4 medium-6 small-12">
<h2>Test</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 2</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 3</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 4</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 5</h2>
</div>
<div class="cell large-4 medium-6 small-12">
<h2>Test 6</h2>
</div>
</div>
How do you change the default padding width between grid-xy cells?
Turns out I wasn't using the right variables
$grid-padding-gutters: 40px;
$grid-margin-gutters: 40px;
Worked
I just wanna know the correct class to use for divs..currently my index page content divs look as below:
This is okay for dekstop view, I used class="large-4 columns" for the above. But I want something like below for tablet and mobile view.
How do I achieve this plz?
I TRIED but din't work as i wanted.
<div class="large-4 columns">
<div class="medium-2 columns">
<img src="images/launch-home.png" alt="" height="60px;" />
</div>
<div class="medium-10 columns">
<h1>LAUNCH OF THE XXXX</h1>
XXXXX, a pioneering voluntary industry-wide initiative that is dedicated to the development and advocacy of professional standards, including ethical standards, was launched on 24 September 2014. The event was officiated by both the Governor of Bank Negara Malaysia and Chairman of the Securities Commission Malaysia and was attended by leaders of the financial services industry.
</div>
</div>
If your settings has 12 total columns it should be like this:
<div class="row">
<div class="medium-12 large-4 columns">
<!--inaugural-->
</div>
<div class="medium-12 large-4 columns">
<!--launch-->
</div>
<div class="medium-12 large-4 columns">
<!--insights-->
</div>
</div>
I think your first tag is not at good place
<div class="row">
<div class="large-12 columns">LARGE VIEW</div>
<div class="medium-4 columns">
<img src="images/launch-home.png" alt="" height="60px;" />
</div>
<div class="medium-8 columns">
<h1>LAUNCH OF THE XXXX</h1>
...
</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
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>
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.