Building a portfolio site with TB v3.0.0 and encountered a horizontal scrolling issue that I can't seem to figure out.
Trying to achieve a full bleed for the images on mobile devices so I striped the left/right padding, but horizontal scrolling occurs. Here's the css I added that's causing the problem:
#media (max-width: 767px) {
.container {
padding-right: 0;
padding-left: 0;
margin-right: auto;
margin-left: auto;
}
}
Here's the staging site I'm working off of: http://www.kesernio.com/playground/
I wonder if changing the padding helps to set the images 100% in the first place.
The code below will be 100% viewport (green). Also mention your content has a padding. This padding is set on your col-xs-12 (to remove it: set the padding of .col-xs-12 to zero )
In your case remove the padding of your col-- with images.
<div class="container" style="background-color:green;">
<div class="row">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
</div>
About your scrollbar, in fact you do this:
<div class="container" style="background-color:green;padding:0">
<div class="row">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
add padding:0 this will give you a horizotal scrollbar cause your .row classes have a negative margin of 15px on both sides.
To remove the scrollbar set the margin of the .row to zero to:
<div class="container" style="background-color:green;padding:0">
<div class="row" style="margin:0">
<div class="col-xs-12 contact">
content
</div>
</div>
</div>
See also: https://stackoverflow.com/a/19044326/1596547 about the construction of the gutter of the grids
Related
Basically, I need to put a back-to-top button at the right side of the footer.
Something like this:
What I get is this:
You can see that there is a blank space between footer and the end of viewport, that space is the height the back-to-top button, if I remove the button the blank space is removed too.
I'm using bootstrap so my html code is similar to:
<footer class="container-fluid">
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
<div class="back-to-top>TOP</div>
</footer>
You can see an example in Bootply. You can see that the footer has to be 20px height (min-height: 20px) but instead it is 40px.
I think that my problem will be solved if I can put the .back-to-top div beside the .container div.
How can I get this?
You can use helper class pull-right and move TOP link before container:
<footer class="container-fluid">
<div class="back-to-top pull-right">TOP</div>
<div class="container">
<div class="content1>CONTENT 1</div>
<div class="content2>CONTENT 2</div>
</div>
</footer>
You need to remove your CSS bloc:
.back-to-top {
float: right;
position: relative;
top: -20px;
}
Doc: http://getbootstrap.com/css/#helper-classes-floats
Having a min-height proxy doesn't mean you footer is going to be 20px. That just mean its height won't be smaller than that. If you want your height to be 20px, use height property. If for some reason you want it to be variable, you can look to the max-height property.
For your "back-to-top" button, here is my suggestion :
http://jsfiddle.net/Bladepianist/38ne021p/
HTML
<footer class="container-fluid navbar-inverse">
<div class="row">
<div class="col-xs-6">CONTENT 1</div>
<div class="col-xs-5">CONTENT 2</div>
<div class="col-xs-1 text-right" id="back-to-top">TOP</div>
</div>
</footer>
CSS
.container-fluid {
color: white;
}
Basically, I change your "back-tot-top" class to an ID in my model but you're free to adapt it to your liking.
Using the col-system and the text-positions classes, you can achieve the same rendering as you show in your question. That way, the back-to-top button is part of the footer.
Hope that's helping ;).
I'm using Boostrap 3 and have a problem with backgrounds on elements that appear too wide. The container is in desktop mode 1170px and has 15px padding left and right which makes the content appear with 1140px width.
When I'm adding an element with a different background color (let's say body + .container both has same background), then the element will appear as 1170px wide due to the background showing in the padding area as well.
I could add CSS for each element with deviating background in each screen width (media queries) to solve the problem. But I hope there is a better way to achieve this since I can't be the only person with this problem. Does anyone know some Boostrap class / function to solve this issue, or know some best practise for this?
Try wrapping the rows and/or inner content, you can see how I have done it here; http://jsfiddle.net/w7wowg94/
HTML
<div id="master-wrap">
<div class="container">
<div class="wrap-class-one">
<div class="row">
<div class="col-md-6">Content 1</div>
<div class="col-md-6">Contnent 2</div>
</div>
</div>
<hr />
<div class="row">
<div class="col-md-4">
<div class="inner-wrap">Content 1</div>
</div>
<div class="col-md-4">
<div class="inner-wrap">Contnent 2</div>
</div>
<div class="col-md-4">
<div class="inner-wrap">Contnent 2</div>
</div>
</div>
</div>
</div>
CSS
#master-wrap {
margin: 0 auto;
background-color: #eee;
padding: 15px;
}
.wrap-class-one {
background-color: #ccc;
padding: 15px;
}
.inner-wrap {
padding: 15px;
background-color: #ccc;
}
I am using Bootstrap 3, and have a problem getting a div to sit over a jumbotron header.
I am using the jumbotron class to give me a full width, responsive header with a background image as below...
<div class="container-fluid">
<div class="jumbotron">
<div class="container">
<div class="row">
<div class="col-md-8">text here</div>
<div class="col-md-4">text here</div>
</div>
</div>
</div>
Here is the rest of the site...
<div class="container">rest of site goes here
</div>
What I want to do is have my entire site/container BELOW the jumbotron - slide up and cover half of it's height. Obviously as is, the container for the site content is cleared below the jumbotron, but i need a solution to get it up about 100px to cover the lower half of jumbotron.
I have tried both z-index methods and absolute positioning but can't get either to work. Any suggestions?
A SAMPLE TO WORK WITH HERE - http://jsfiddle.net/9b9Da/7/
As stated in comments, Bootstrap 3 doesn't have a .container-fluid class, which was removed in Bootstrap 2.3.2 as .rows are full width by default (Mobile first approach). position: relative was then used to offset your overlying content <div> to appear half way over the .jumbotron
<div class="jumbotron">
<div class="col-md-8 jumbotext">text here</div>
<div class="col-md-4 jumbotext">text here</div>
</div>
<div class="container" id="content">
<div class="row">
This content needs to float over the Jumbotron above
</div>
</div>
<style>
#content {
position: relative;
bottom: 80px;
z-index: 500;
opacity: 0.6;
}
#content > .row {
min-height: 400px;
background: #cccccc;
}
.jumbotron > .jumbotext {
z-index: 700;
}
</style>
Fiddle: http://jsfiddle.net/9b9Da/9/
I'm using bootstrap 3 and it has .container-fluid. It's also listed in the bootstrap docs and on the W3.
Bootstrap classes
<div class="row-fluid">
<div class="span6"> Some content </div>
<div class="span6"> Some content </div>
</div>
I want to put a vertical line down the middle of the gutter between these two columns.
The line is not the full length of the columns - so I can't just use a border.
I've tried changing my layout to span6, span1, span5 and using the span1 column for the line, but it messes up the space for my right content.
Any ideas ?
If you can go with the assumption that a modern browser (one that supports CSS 3) is being used, you can use the box-sizing property (http://www.w3schools.com/cssref/css3_pr_box-sizing.asp) to override the default Bootstrap .span6.
You may also want to enclose this in a #media query to avoid strange left-side spacing when the browser is resized to a smaller width..
#media (min-width:979px) {
.span6:not(:first-child) {
border-left: 1px solid #ddd;
padding-left: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
Bootply
Thanks for the answers. But the problem was not just a border. The vertical line has to be for only part of the length of the columns.
My solution was to use absolute positioning for the vertical line div & I had to give the span column a position:
<div class="row-fluid">
<div class="span6"> Some content </div>
<div class="span6" style="position:relative">
<div class="thin_vertical_line" style="position:absolute;left:-15px;height:70%;top:0px;></div>
Some content
</div>
</div>
The only remaining issue is that the -15px left assumes a gutter width (twitter bootstrap puts a left margin on the second span to get the gutter) of a certain dimension & with response twitter bootstrap this can change depending on screen resolution. -15px is safe but won't be quite centered on smaller devices.
In Bootstrap 4.5.3 you could use this html code:
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
With this CSS:
#media (min-width: 768px){
.container .row .col-md-3:not(:first-child){
border-left: 1px solid #ccc;
}
}
I have some divs that should take the entire height of a page. I managed to get this working as i needed. (Some fixed rows and some flexible rows) like in a html table.
I took the solution from one of my other questions here:
Layout divs in css like table cells in HTML Tables
Today i had to add a div inside the flexible row which should take 100% of the height of the flexible row. Which works great in all major browsers. Muahaha that was a good joke wasn't it? Of course this doesn't work as expected in IE see my js fiddle:
<div class="tableContainer">
<div class="row rowA">
<div class="cell">Test</div>
</div>
<div class="row rowB">
<div class="cell">Test</div>
</div>
<div class="row rowC">
<div class="cell">Test</div>
</div>
<div class="row rowD">
<div class="cell testcell">
<div class="testcontent">Test</div>
</div>
</div>
<div class="row rowE">
<div class="cell">Test</div>
</div>
</div>
http://jsfiddle.net/7ewEJ/3/
the ie seems to take the "100%" from the page and not from the enclosing flexible table row. So the blue div should take the whole space of the purble table row.
Am i doing anything wrong?
Could this be a bug in ie's height calculation?
http://jsfiddle.net/7ewEJ/5/
div.testcell{
height: 100%;
width: 100%;
min-width: 1px;
min-height: 1px;
/*background: #fff;*/
align: center;
display: block;
}