I'm building a simple site in foundation and I thought it would make it faster because it has awesome grid. Problem is when I put images on my grid the spacing between them is too far away. I want to decrease the spacing so the images are basically 15px or so from each other. I've tried to change the padding and margin but it throws off the entire grid. Is there a simple way to achieve this in Foundation or am I just better of writing this from scratch? My HTML is below.
<div class="row">
<div class="gallery small-4 large-4 columns">
<img src="assets/img/chaiLatte.jpg" alt="Painting by LaRue. ">
</div>
<div class="gallery small-4 large-4 columns">
<img src="assets/img/milkchocolate.jpg" alt="Painting by Bellingham.">
</div>
<div class="gallery small-4 large-4 columns">
<img src="assets/img/darkChocolate.png" alt="Painting by Bellingham.">
</div>
You can collapse the grid to remove the spacing by adding that class to the row containing your images. You can then add the padding or margin to your images to give the 15px spacing you want.
<div class="row collapse">
<div class="gallery small-4 large-4 columns"></div>
<div class="gallery small-4 large-4 columns"></div>
<div class="gallery small-4 large-4 columns"></div>
</div>
There is a $column-gutter variable in _settings.scss. This controls the grid spacing. By default its set to $column-gutter: emCalc(30px);. Try changing this value. This is only going to help you if you are using the sass version.
Related
I'm faced two issues
col-6 center text what should we do in order change to center,need change to row?
when the size is small, how to set image and text always at bottom
<div class="container-fluid ">
<div class="col-md-6 ser-first-grid text-center">
<img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" />
</div>
<div class="col-md-6 ser-first-grid text-center">
<h3>PRODUCT SOURCING</h3>
<p>We assist clients in sourcing suppliers to meet specific product requirements.</p>
</div>
</div>
<div class="container-fluid">
<div class="col-md-6 ser-first-grid text-center">
<h3>DESIGN DEVELOPMENT</h3>
<p>MALCORP possesses the capacity to design specific and specialized products to meet the most discerning of customer requirements.</p>
</div>
<div class="col-md-6 ser-first-grid text-center">
<img src="https://www.picwallz.com/wp-content/uploads/2017/02/wallpaper-landscap-sunrise-nature-view-hd-photos-famous-on-high-quality-for-pc.jpg" />
</div>
</div>
Check this jsfiddle out link
Use bootstrap flex-order here for responsive ordering of columns.More info Bootstrap flex-order
Add this class order-md-1 on second column and order-md-2 on first column.
As for the centering part, a text-center class on column should've worked.
Also you must put your columns inside rows.
Sorry for the really confusing title. What I'm trying to do should be quite easy in theory.
I think the best way to demontrate it is by showing you an image:
1 row at the top with 2 columns, and every other column coming after that should be positioned under the second column...
Is this doable?
Thanks
That's what the "offset" classes are for. col-md-offset-1 applied to the elements in the second column (as additional class) should do what you want (for medium viewport size)
(probably you use wider columns with classes like col-md-3 that span three columns of the grid. In this case you'd need col-md-offset-3for the offset)
use col-md-offset-* class
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"><p>fixed column</p></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
<div class="row">
<div class="col-md-offset-6" style="text-align=center;"></div>
<div class="col-md-offset-6" style="text-align=center;"><p>col</p></div>
</div>
for more information :
Bootstrap Grid System - Bootstrap Grid Examples -
Try HTML display : flex for such layout. For example refer below link.
https://css-tricks.com/snippets/css/a-guide-to-flexbox
Try below code snippet.
<div class="row-fluid">
<div class="span4"><div class="well">1</div></div>
<div class="span8">
<div class="row-fluid">
<div class="span6"><div class="well">2</div></div>
</div>
<div class="row-fluid">
<div class="span6"><div class="well">3</div></div>
</div>
<div class="row-fluid">
<div class="span6"><div class="well">4</div></div>
</div>
</div>
</div>
I'm using a Bootstrap grid to create a quad chart, and leveraging the CSS3 flexbox layout mode discussed here to make each column in the same row the same height. However, I want to use a Bootstrap well in each quad to highlight the "quad-ness" of the chart and I can't seem to figure out how to get the wells to fill all the space in the column divs.
<div class="row row-eq-height">
<div class="col-md-6">
<div class="well">
hello<br/>world<br/>how<br/>are<br/>you?
</div>
</div>
<div class="col-md-6">
<div class="well">
hi!
</div>
</div>
</div>
<div class="row row-eq-height">
<div class="col-md-6">
<div class="well">
hi!
</div>
</div>
<div class="col-md-6">
<div class="well">
hello<br/>world<br/>how<br/>are<br/>you?
</div>
</div>
</div>
I have a playground here (be sure to go full screen on the result to see the quad chart).
I tried modifying the well class' CSS to set height to 100%, but that just seems to increase the height of the outer divs as well (example here).
Any ideas how I can get the wells to fill up the divs they're in without increasing the height of the divs?
Edit #1
To be clear, I'm not asking how to get all of the columns in a row the same height. The Flexbox solution using the row-eq-height class does that for me.
What I'm trying to figure out is how to make the Bootstrap well within a column div be the full height of the column div, regardless of how much content the well contains.
I've updated my two examples (linked above) to include border lines around the column divs to try and better articulate what I'm talking about.
Check this DEMO
<div class="row row-eq-height">
<div class="col-xs-6 "><div class="well">column 1</div></div>
<div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>
</div>
<div class="row row-eq-height">
<div class="col-xs-6 "><div class="well">column 1</div></div>
<div class="col-xs-6 "><div class="well">column 2<br>this is<br>a much<br>taller<br>column<br>than the others</div></div>
</div>
I have the following grid using zurb-foundation:
<div class="row">
<div class="small-6 large-3 columns"> </div>
<div class="small-6 large-9 columns"> </div>
</div>
The above grid makes the layout of two columns. However, I want to know in small screens to make the above layout to be one column layout instead of two columns with 6. In other words, I want the second div of that row to act as a new row for small screens.
Assuming you are using the standard 12 column grid and haven't modified that, just make the small ones 12:
<div class="row">
<div class="small-12 large-3 columns"> </div>
<div class="small-12 large-9 columns"> </div>
</div>
Just know that small filters it's way up... so in this example "medium" will also be 12. If you want medium to look like large, then do this:
<div class="row">
<div class="small-12 medium-3 columns"> </div>
<div class="small-12 medium-9 columns"> </div>
</div>
Notice how you don't need the large in the above example as medium filters up to everything above it.
using the below Html you can have offset and have centered div on mobile screen.and have large-3 and large-9 div respectively on larger screens.
<div class="row">
<div class="small-6 small-offset-3 large-3 large-offset-0 columns ">..</div>
<div class="new small-6 small-offset-3 large-9 large-offset-0 columns">..</div>
</div>
In foundation css column last child is floated right.so we change it to float left to have both the div stacked up on after the other
.new{
float:left;
}
Something like this should work:
<div class="row">
<div class="medium-6 large-3 columns">
<div class="small-6 medium-12 large-12 columns">column 1</div>
</div>
<div class="medium-6 large-9 columns">
<div class="small-6 medium-12 large-12 columns">column 2</div>
</div>
</div>
http://jsfiddle.net/6tMZH/
should be a simple fix:
.columns {
width:100%;
}
You can see it here
I have a layout with two columns, and in the first column I have sub columns. So something like:
<div class="row">
<div class="span8">
<div class="row">
<div class="span1"></div>
<div class="span4"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
</div>
</div>
<div class="span4">
</div>
</div>
When the page is resized to be smaller, I would like the two outer columns to stack on top of each other, but not the inner columns as they always need to be on the same line i.e. once the page is resized below the width of the span8 it then introduces a horizontal scroll bar.
Is this possible?
<div class="row">
<div class="span8 container-fluid">
<div class="row-fluid">
<div class="span1 offset2"></div>
<div class="span4"></div>
<div class="span1"></div>
<div class="span1"></div>
<div class="span1"></div>
</div>
</div>
<div class="span4">
</div>
</div>
If you use a fluid layout inside of span8, the content in it should stay on the same line.
And, I don't know if you're aware, but a row is always 12 columns, even if it's in a span8.
I hope you know what I mean. Sorry for my bad english.