This could be an incredibly dumb question, but I'm at a loss on how to make 3 sets of columns line up with foundation's grid.
Here's the js fiddle
HTML
<div class="row">
<div class="medium-9 columns">
<div class="medium-4 columns" style="height: 250px; background: green;"></div>
<div class="medium-4 columns" style="height: 250px; background: blue;"></div>
<div class="medium-4 columns" style="height: 250px; background: red;"></div>
</div>
<div class="medium-9 columns">
<div class="medium-4 columns" style="height: 250px; background: yellow;"></div>
<div class="medium-4 columns" style="height: 250px; background: orange;"></div>
<div class="medium-4 columns" style="height: 250px; background: purple;"></div>
</div>
<div class="medium-3 columns" style="height: 500px; background: black;"></div>
</div>
I want the black column to line up with the first "row" of columns without making the position of .row container relative and the medium-3 columns div absolute.
Furthermore, why doesn't this work like I assumed it would? Isn't a situation like this the whole point of a grid system?
Thanks!
You are close. The right solution should be like this (Fiddle):
<div class="row">
<div class="medium-9 columns">
<div class="row">
<div class="medium-4 columns" style="height: 250px; background: green;"></div>
<div class="medium-4 columns" style="height: 250px; background: blue;"></div>
<div class="medium-4 columns" style="height: 250px; background: red;"></div>
</div>
<div class="row">
<div class="medium-4 columns" style="height: 250px; background: yellow;"></div>
<div class="medium-4 columns" style="height: 250px; background: orange;"></div>
<div class="medium-4 columns" style="height: 250px; background: purple;"></div>
</div>
</div>
<div class="medium-3 columns" style="height: 500px; background: black;"></div>
</div>
The reason your fiddle is off is because each row needs to be 12 columns in length. If a row consists or more than 12 columns, the element that overflows then wraps to the next row, even if a row is not declared.
<div class="row">
<div class="medium-9 columns">
...
</div>
<div class="medium-9 columns">
...
</div>
<div class="medium-3 columns" style="height: 500px; background: black;"></div>
</div>
Your second div in the row makes these columns add up to 18 so it pushes it to the next level down. This is why last div of 3 columns appends to the end of your second div of 9 columns.
To get the layout you want, you'll need to have nested rows and ensure that each row adds up to 12 columns.
<div class="row">
<div class="medium-9 columns">
<div class="row">
<div class="medium-4 columns" style="height: 250px; background: green;"></div>
<div class="medium-4 columns" style="height: 250px; background: blue;"></div>
<div class="medium-4 columns" style="height: 250px; background: red;"></div>
</div>
<div class="row">
<div class="medium-4 columns" style="height: 250px; background: yellow;"></div>
<div class="medium-4 columns" style="height: 250px; background: orange;"></div>
<div class="medium-4 columns" style="height: 250px; background: purple;"></div>
</div>
</div>
<div class="medium-3 columns" style="height: 500px; background: black;"></div>
Related
Using FoundationCSS, if I use the basic grid system by defining a row and then columns, I get a grid that is 1000px wide on desktop.
<div class="row">
<div class="small-12 columns">
...
</div>
</div>
However, if I do the same thing, but omit the "row", I get a full width layout.
<div class="small-12 columns">
...
</div>
Are there any side affects I should be aware of by omitting the "row"?
The safest thing I found was to add a new class to make the container full-width:
.full-width {
width: 100%;
margin-left: auto;
margin-right: auto;
max-width: initial;
}
And use it in the html:
<body>
<div class="row full-width">
<div class="small-12 columns">
....
</div>
<div class="row"
<div class="small-6 columns>...</div>
<div class="small-6 columns>...</div>
</div>
</div>
</body>
I sometimes use columns as spacers, and so when there is no content, I don't want the column to collapse, which is the default behavior. Is there a built-in way to prevent empty columns from collapsing?
I know I can add some invisible div or something, but I'm asking if there's a standard way to accomplish this without resorting to hacks like that.
You can use offsets to create gaps:
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-11 columns">11</div>
</div>
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-10 large-offset-1 columns">10, offset 1</div>
</div>
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-9 large-offset-2 columns">9, offset 2</div>
</div>
<div class="row">
<div class="large-1 columns">1</div>
<div class="large-8 large-offset-3 columns">8, offset 3</div>
</div>
I created a hacky style for this. Like so:
.row.no-collapse .columns {
min-height: 1px;
}
<div class="row no-collapse">
<div class="large-1 columns">1</div>
<div class="large-11 columns">11</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
Hi I'm trying to customize my django form and add the file upload widget from Jasny Bootstrap. However, it doesn't seem to be working..
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">{{ wizard.form.main_image }}</span><span class="fileupload-exists">Change</span><input type="file" /></span>
Remove
</div>
</div>
Any ideas what I am doing wrong? Have I put {{ wizard.form.main_image }} in the wrong place?
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" /></div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select an Image</span><span class="fileupload-exists">Change</span>
{{ wizard.form.main_image }}</span>
Remove
</div>
</div>
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;
}
}