i have posted a question on ZURB's forum, but i noticed there were no answers to any post.
As i think this problem might occur to many others, i think it might be a good idea to put it on SO as well. Here it comes:
i have crafted a minimal example of the problem using the following markup (Edited with CLCS advices):
<body>
<div class="row collapse test">
<div class="large-4 columns">
<p>Test 1</p>
</div>
<div class="large-4 columns">
<p>Test 2</p>
</div>
<div class="large-4 columns">
<p>Test 3</p>
</div>
</div>
</body>
All CSS classes are ZURB Foundation untouched classes. The only addition is for the test-table class, which sole purpose is only to get visual aid on the problem (Edited as well for clarity sake):
.test div {
border: 1px solid red;
}
The expected output would be 3 columns perfectly touching each other. The actual output is two columns touching each other like expected, but the third one being offset a bit on the right, leaving a white space between the center and the right one (See attached image, edited as well, but issue still present).
Seems that some other users are facing the same problem under the same environment (Safari 7, Zurb Rails Gem 5.0.2.0)
It is a combination of rounding issue that others have pointed out above and the fact that Foundation put float: right; on the last column in the row. That is why you are seeing the gap between the last column and the middle column.
To remove the gap, you can add the end class to every column.
Have a look at Foundation's docs under "Incomplete Rows"
http://foundation.zurb.com/docs/components/grid.html#incomplete-rows
The problem is with roundings by Safari. There is a difference between width: 33.333% and width: 33.333333% for large-4 in Safari. To solve it use sass to compile own css based on foundation sass files and make higher precision number.
Put Sass::Script::Number.precision = 6 in config.rb
or in Gruntfile.coffee
sass:
options:
loadPath: ["bower_components/foundation/scss"]
sourcemap: "true"
precision: 6
dist:
files:
"css/app.css": "scss/app.scss"
Looks like a rounding issue with how Safari is converting the % widths of the columns, default site width ends up (on my machine at least) at 1000px wide. Comparing the calculated results between Chrome and Safari I get 333.328px in Chrome and 333px in Safari.
Depending on the rest of your layout requirements a workaround may be to adjust your layout widths to a figure that works better with the columns you require.
I fix it by adding css class to last column, css for this class
.your_class_for_last_column { float: left !important;}
/* to fix 1px Foundation 5 bug*/
Adding a border of 1px worked for me. You could try something like this:
<div class="small-5 small-offset-2 columns border">
...
</div>
<div class="small-5 columns border">
...
</div>
On CSS:
.border {border-right: 1px solid color-of-column;}
Related
The code is linked below with JSFiddle.
The problem was when I decrease the screen size the div blocks should be in the same line with decreased width instead they are going one below the other. (once check it by increasing the screen width).
The other one I want to highlight is that the code for showing
read more option for text/paragraph when we decrease the block size. That is when we click on read more the block size should increase and show the remaining text. It would be very helpful if someone suggests code for this.
The code is
.center{
float: none;
padding:0px;
margin-left: auto;
margin-right: auto;
}
div.allign{
height:170px;
margin:15px;
text-align:center;
}
div.content{
height:200px;
background-color:#fff;
background-color:#F4F1EE;
}
<div class="container-fluid">
<div class="row-fluid content">
<div class="col-md-1 "></div>
<div class="col-md-3 allign">
<h3>Get Started</h3>
<p>How it works?</p>
<p>It's very easy and simple,just sign up for free and get started with your account.
It's easy to reserve or cancel a book from anywhere.</p>
</div>
<div class="col-md-3 allign">
<h3>About library</h3>
<p>location,Directions,Books info...</p>
<p>Total books:1124<br />journals:130<br />.</p>
</div>
<div class="col-md-3 allign">
<h3>No text books?</h3>
<p>Dont worry here we go...</p>
<p>Reserve your books from online by just one click.
Read online/offline by downloading pdf files.</p>
</div>
</div>
</div>
Click here for a JSFiddle example
https://jsfiddle.net/nvpqfxbj/6/
Thanks in advance.
You are using the "md" grid size on those elements so they will become full width below 991px. If you want to maintain the columns on all devices, then use the "xs" columns.
Instead of 'col-md-3' and 'col-md-1' use 'col-xs-3' and 'col-xs-1'. However, you don't need the empty first column because BS address it with offsetting columns.
Also, the margins set from .allign will override the margins BS uses on the columns and you'll have problems unless you remove it. If you need the margins, use another container div nested inside the col-* containers.
BOOTPLY EXAMPLE: http://www.bootply.com/EfOZtUQqcs
This is the basic principle all responsive grid systems are built upon and you're going to struggle unless you understand this basic concept. It's all covered in the BS3 documentation.
http://getbootstrap.com/css/#grid
As for your "read more" problem. The code you provided is not the culprit. There is something going on server-side or JS that is causing this and you've provided no server-side or JS code.
This works for me.
Bootstrap 5
<div class=".container-fluid">
I am having some problems with Bootstrap 3
In my header I currently have 2 columns, both with a columns width of 6. I would like to add a column in between these two columns.
But if i change the column to 4 and add a 4 column in between they appear on different lines. Is the following not the correct way to have 3 columns in a row in bootstrap 3?
<div class="row">
<div class="col-md-4">
// Content here
</div>
<div class="col-md-4">
// Content here
</div>
<div class="col-md-4">
// Content here
</div>
</div>
Thee is a link to site where i am having the problems. The problem is in my header where my logo is
http://www.sevecu.dk/juni14/
Update: It works in Chrome and Safari but not in Firefox and Explorer
I was able to reproduce this opening it in IE. Your three columns are setup correctly.
What you'll notice is even if you delete the logo nodes through the debugger, the one of the three is always in the top-right corner. This led me to believe the alignment of something above it is uneven.
Specifically, it appears to be caused by the following in template.css:
p {
margin: 0 0 10px;
}
Which is pushing the .customphone below the area defined in the white-row.
To resolve it, one way would be to do:
p {
margin: 0;
}
Or probably change it to .customphone p or create its own class so you don't affect all p
This resolved the issue for me.
The HTML scheme is following:
<div class="items">
<div class="item">...</div>
<div class="item">...</div>
<div class="item">...</div>
...
</div>
.item CSS style:
float: left;
And the result:
But the white boxes are not aligned right one after another one -- where could be the issue? I;ve tried also using display: inline-block; instead of float: left;, but the result was basically the same.
Thank you
You can use CSS 3 column-width and column-gap like this..
http://www.bootply.com/118335
I run into the exact same problem and I found this one that worked for me.
https://github.com/kudago/waterfall
It depends only on js no css, though I'm still using bootstrap for other styling. I also use jquery.infinitescroll.js to dynamically load items and after the items are appended, waterfall will do its magic and put everything in place.
The only glitch I found is sometimes items could overlap a bit vertically, as soon as you keep scrolling down they are put correctly. I'm not sure why this is happening, a bit annoying but till I find something better.
Hope this helps.
I wanted to make a site with the grid system. ( I have made one already, so I know/knew how it works )
This is my custum grid: http://grids.heroku.com/grid.css?column_width=100&column_amount=8&gutter_width=15
And now comes the problem: When I try to put prefix_1 as a class nothing happen it just stays in the same place. And I have one prefix_1 grid_3 and one grid_4. so it is 1+3+4=8. My grid is 8 columns wide so it has to fit together easily, but it doesn't.
http://jsfiddle.net/gekkeabt/5LA82/
<div class="container_8">
<span id="download" class="prefix_1 grid_3"><b>Download</b> Leasy CMS</span>
<span id="download" class="grid_4"><b>Download</b> Macha Webserver</span>
<span id="about" class="prefix_2 grid_4 suffix_2"><b>About</b> Me</span>
</div>
I checked my code 100 times. But I can't find where it went wrong.
Maybe someone can help me out?
Thanks!
EDIT:
I solved the prefix and suffix problem by defining the class in another div outside of the span.
So it looks like:
<div class="prefix_1 grid_3"><span id="download">The content....</span></div>
Try removing the
padding:10px 50px 10px 50px;
line from your #download,#about CSS declaration (or at least the horizontal padding of 2 x 50px).
It's that extra padding that makes the elements wider than one row.
Here's how it looks without that line: http://jsfiddle.net/WHG4u/
Please add this css to your /css/custom.css to make the page stop jumping each time the slide changes
.avia-content-slider-active .slide-entry-wrap { height: 275px; }
I'm working on a layout with 2 columns. But, I'm having some issue with doing it, since my templates are quite complicated, and I'm unable to have one div per column.
For example, I might have something like:
<div class="column left">
left column - part 1
</div>
<div class="column right">
right column - part 1
</div>
<div class="column right">
right column - part 2
</div>
<div class="column left">
left column - part 2
</div>
And what I'd like to do is create two columns, with the same width and without empty holes (vertically) between them. Normally, it wouldn't be a problem to accomplish with:
<div class="column left">
left column - part 1
left column - part 2
</div>
<div class="column right">
right column - part 1
right column - part 2
</div>
Furthermore, my goal is to have a solution which works in dead browsers, like IE7. But, I'd also like to see solutions which are supported only in newer browsers, because I think there might be some interesting solutions. Of course, there are solutions through JS, e.g. merging elements of all .column.left in one div, and the same thing for .column.right, but CSS solutions would be better.
Is having the divs from different columns in none specific order a requirement? If so, then you can't accomplish it by pure css, because of the need to put some elements above the ones from another column. See Use CSS to reorder DIVs.
If that's not the issue, try writing all left column divs before right column divs in the code and use following css:
.left {
float: left;
width: 100px;
clear: left;
}
.right {
margin-left: 100px;
}
It creates a two-column layout. That method works particularly well when one of the columns if of contant width, but you can achieve whatever you want by changing 100px to for example 50%. Example here: http://jsfiddle.net/uQwUT/.