https://jsfiddle.net/jonathansh1115/oc75f0sr/
I read about many posts of the width would not be 100% and people always say
body {
margin=0;
padding=0;
}
will work but loooook at this!!
ps:i am using the bootstrap link there
Well, there are lots of issues with your code.
Firstly you are not using bootstrap properly. You have to add the CSS file also. Bootstrap will not work if you only include the js file. Once you include it then everything will work just fine.
The spacing around divs is because of the browser defaults. If you include Bootstrap they will just disappear. Also, you need to use bootstrap classes properly.
In my opinion, you should go through Bootstrap's documentation and then create your layout. http://getbootstrap.com/getting-started/
If I understand your problem you want that your 3 blocks have a 100% width. Here they have a 100% of 33.33% of your page because you have col-sm-4.
Try to replace by :
<div id="all">
<div class="row col-sm-12" id="hqllo"><h1>hqllo</h1></div>
<div class="row col-sm-12" id="nook"><h1>nooook</h1></div>
<div class="row col-sm-12" id="pro"><h1>pro</h1></div>
</div>
remove this in css
.row {
width:calc(100%/3);
}
jsfiddle
Related
I'm using the class="thumbnail" and class="caption" from bootstrap to generate this presentations.
Problem is that when the Title it's 1 row longer for one of the cards it becomes bigger and it brakes my col-md-3 or col-md-4
How do I make sure that all the cards will have the same size as long as the Title will extend on two rows.
Notice how the height increases as the title gets longer
Thank You!
You need to truncate you title see the example:
$('button').on('click', function() {
$('p').toggleClass('ellipses');
});
.ellipses {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="width:120px">
<button>Toggle Ellipses</button>
<p class="ellipses">For more information, please visit: http://csstricks.com/thisisanonexistentandreallylongurltoaddtoanytextinfactwhyareyoustillreadingit.</p>
</div>
You can use Flexbox http://v4-alpha.getbootstrap.com/getting-started/flexbox/ but read the details about browser support. More details about how to use Flexbox Grids can be found here http://v4-alpha.getbootstrap.com/layout/flexbox-grid/
An example
http://getbootstrap.com.vn/examples/equal-height-columns/
It's terrible Bootstrap mechanics and here are no bulit-in solution to fix it.
You can chose one of next methods to fix it:
You can set fixed height of title block or whole container.
You can calculate height of largest container and set this height to all containers using JS.
You can use one of JS libraries to make pretty mosaic grid(like this). One of libraries to do it - Masonry.
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">
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 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;}
I am currently using the bootstrap scaffolding/grid system as follows:
<div class="row-fluid">
<div id="insta-shop-filter" class="span2 visible-desktop">
</div>
<div id="insta-shop-grid" class="span10">
</div>
<div>
As you can see I added the visible-desktop to insta-shop-filter so that this will disappear on non-desktop. However what I wanted to do is that when this disappears I wanted insta-shop-grid to have a span12, so it takes the full width. Is there a way to do this without having to use javascript/jQuery and listening for window events?
You can use CSS3 media queries to toggle your styling on different devices. In this instance, you might consider writing a media query based on a 640px or 480px device width that does something like the following:
#media screen and (max-device-width:640px){
#insta-shop-filter{
display:none;
}
#insta-shop-grid{
width:640px!important;
}
}
One small note here, using !important is discouraged.
In bootstrap 2 (which it appears you are using) I don't think there is an easy way to do this without overriding the style with a custom CSS media query (like #Conqueror suggested) or adding/removing classes in javascript.
However I just want to point out that this is baked into Bootstrap3 by using col-SIZE-SPAN as documented here. In your case it would be.
<div class="row-fluid">
<div id="insta-shop-filter" class="col-md-2 hidden-sm">
</div>
<div id="insta-shop-grid" class="col-md-10 col-sm-12">
</div>
<div>