While Designing website layout using foundation css,if i use grid system as bellow within the div with class row.its giving more space at left and right as in the Image.
The Code I am using is as bellow within the div with class="row"
<div class="row">
<div class="small-2 large-4 columns">small-2 large-4 columns</div>
<div class="small-4 large-4 columns">small-4 large-4 columns</div>
<div class="small-6 large-4 columns">small-6 large-4 columns</div>
</div>
Here I need just 5-7% space both at left and right side.How to achieve this by using foundation?
You can use Centered Columns in Foundation to do this.
Small-1 row takes up 8.3333% so by the below html you can have space of 4.166% on the right and on the left.
<div class="row">
<div class="small-11 small-centered columns">
<div class="row">
<div class="small-2 large-4 columns">small-2 large-4 columns</div>
<div class="small-4 large-4 columns">small-4 large-4 columns</div>
<div class="small-6 large-4 columns">small-6 large-4 columns</div>
</div>
</div>
</div>
Here is a fiddle-link
If I understood you correctly you want something like this http://jsfiddle.net/Tb9Vg/1/ But it has nothing to do with the Foundation itself.
html:
<div class="wrap">
<div class="row">
<div class="small-2 large-4 columns">small-2 large-4 columns</div>
<div class="small-4 large-4 columns">small-4 large-4 columns</div>
<div class="small-6 large-4 columns">small-6 large-4 columns</div>
</div>
</div>
css:
.wrap{
padding-left:7%;
padding-right:7%;
}
.columns{
height: 500px;
background-color:blue;
}
.row ( margin-left:auto; margin-right:auto; width : 30em;}
The margin-left and margin-right centers your element, and with width property you can set the size of your element as big as you like (30 is just an example). The benefit is that when you resize the screen, it retains distance from both sides.
We need to change the width of class "row" of a foundation as much as we need.thats it we will get space at both left and right side.
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 am struggling to get the layout sorted using the code below.
<div class="row">
<div class="large-6 columns">
<div class="row collapse">
<label>Contigency</label>
<div class="small-9 columns">
<input type="text" name="contingency">
</div>
<div class="small-3 columns">
<span class="postfix">%</span>
</div>
</div>
</div>
<div class="large-3 columns">
<div class="row collapse">
<label style="text-align:right;">Project Management</label>
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-10 columns">
<input type="text" class="" name="project_management">
</div>
</div>
</div>
</div>
<div class="row">
<div class="small-12 columns">
<div class="row">
<div class="small-8 columns">
<label for="right-label" class="center inline"><strong>Drawings/Permits/Inspect</strong> Engineered Drawings, Permits, and Inspections Commissioning</label>
</div>
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-2 columns">
<input type="text" name="project_management">
</div>
</div>
</div>
</div>
It produces the following.
I am trying to line up the bottom input with the one above (Project management).
Any ideas where I am going wrong?
Thanks,
John
Okay John,
It's a couple of things, first of all your bottom input is using 4 columns and the top input is only using 3 columns and secondly you are collapsing the gutters in your first row, but not collapsing them in the second.
You have a two rows, and within the top row you have nested smaller rows. You haven't nested any smaller rows in the bottom row that you have created. To get a little mathematical on you, the container for the first dollar sign is actually 1/6th of 1/3rd the screen width wide (or 1/18th), because you've nested a 2/12 column inside a 3/12 column. The second dollar sign is in a column 1/6th the width of the screen because it's in a 2/12 column. The reason that the top dollar sign doesn't fit in the second dollar sign 3 times has to do with extra width added by gutters.
But this will get it looking how you like:
<div class="row">
<div class="large-6 columns">
<div class="row collapse">
<label>Contigency</label>
<div class="small-9 columns">
<input type="text" name="contingency">
</div>
<div class="small-3 columns">
<span class="postfix">%</span>
</div>
</div>
</div>
<div class="large-3 large-offset-3 columns"><!-- add 'large-offset-3' to avoid any weirdness with this lining up in the future -->
<div class="row collapse">
<label style="text-align:right;">Project Management</label>
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-10 columns">
<input type="text" class="" name="project_management">
</div>
</div>
</div>
</div>
<div class="row">
<div class="large-9 columns"><!-- this row will take up nine columns -->
<div class="row collapse"><!-- collapsing this row will make it line up with the above collapsed row -->
<div class="small-12 columns"><!-- setting this to 12 will have it fill all of the parent 9 columns -->
<label for="right-label" class="center inline"><strong>Drawings/Permits/Inspect</strong> Engineered Drawings, Permits, and Inspections Commissioning</label>
</div>
</div>
</div>
<div class="large-3 columns"><!-- this takes up three columns and essentially matches the code for the the above row -->
<div class="row collapse">
<div class="small-2 columns">
<span class="prefix">$</span>
</div>
<div class="small-10 columns">
<input type="text" name="project_management">
</div>
</div>
</div>
</div>
Give that a go, be sure to read the comments I left in the html explaining everything. But basically you need to make sure that your using the same number of columns if you want things to line up, and if you collapse a row, you will need to collapse other rows that you want to line it up with.
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 have the following situation in a project
<div class="row">
<div class="large-3"></div>
<div class="large-3"></div>
<div class="large-3"></div>
<div class="large-3"></div>
</div>
i would like to use media query to modify to hide a div (large-3) for a certain width and let the other three to be large-4
how can i achieve this ?
thanks
There should be a more efficient way to do that, but this is the first thing that comes to mind:
Sample HTML:
<div class="row design-4-columns">
<div class="large-3 columns"></div>
<div class="large-3 columns"></div>
<div class="large-3 columns"></div>
<div class="large-3 columns"></div>
</div>
<div class="row design-3-columns">
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
<div class="large-4 columns"></div>
</div>
Your css would be something like this:
/* Used to alter styles for screens at least 500px wide.*/
#media only screen and (min-width: 500px) {
.design-4-columns {
display: none !important;
}
}
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.