This issue has been fixed thanks to Manoj Kumar
I can't for the life of me fix the root cause of whitespace on the right side of a site I'm currently building, causing the dreaded 'accidental horizontal scrollbar.' It's especially noticeable on mobile.
http://bradfordkolumbic.com/ma/v2/
I've tried every trick I can think of. Using overflow-x: hidden on the body somewhat fixes the issue but I'm not at all about band-aid fixes - I'm attempting to find the full solution.
You have two problems, each with your markup and style sheet.
First you need to remove this:
.info-box {
padding: 20px 0 40px;
}
The above code is overriding the default padding of the col-* classes which was by default added to compensate for the negative margins provided by row classes.
and then in the below code:
<div class="row">
<div class="col-lg-12 text-center">
<div class="row">
<div class="container-fluid text-center partners"></div>
</div>
</div>
You have wrapped a container-fluid element within a row element, while you need to do the reverse.
Bootstrap grid documentation
Rows must be placed within a .container (fixed-width) or
.container-fluid (full-width) for proper alignment and padding.
Output:
Related
one take col-md-4, second col-md-8, but the second with a picture is not 100% width, there are gaps on the left and right sides, could anyone please advise how to remove gaps and make image full size ? Thanks. Here is screenshot
.upperDiv{
height: 100px;
width: 100%;
background: red;
margin-top: 20px;
margin-bottom: 20px;
}
.fixed-content {
width: 100%;
height: 100px;
object-fit: cover;
}
<div class="container">
<div class="row upperDiv">
<div class="col-md-4" style="background: #005AA1;">
</div>
<div class="col-md-8">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Bootstrap put that padding for you to better align your content, you can remove it by inserting p-0 (padding = 0px) class name as I remember
<div class="container">
<div class="row upperDiv">
<div class="col-md-4 p-0" style="background: #005AA1;">
</div>
<div class="col-md-8 p-0">
<img src="assets/libled.jpg" class="fixed-content">
</div>
</div>
</div>
Looking at your HTML, you are using bootstrap's grid system (hinted by the col-md-X classes). The gap you see in your example is caused by the padding applied to the cells of the grid system to create the gutter.
You have two possibilities:
You put the picture as a background instead, since padding is part of the element, the picture will cover this space too.
You remove the gutter.
1 is pretty self explanatory so I'll go straight to two. You can read about the .no-gutter helper class. It needs to be applied to a row and will effectively remove all gutters for the columns in it. But that means you'll loose the gutter on your left column too. You could also remove the padding with a custom class that sets padding-left:0 !important;padding-right:0 !important; This will effectively remove the gutter for the specified column element.
Whatever the option you choose, remember that cols are not meant to be used directly for the styling. They are here to help you create columns in which to put your visual elements. Although I pointed 3 different approaches to your problem, the only "pure" solution is to use the .no-gutter. Others might have weird visual impacts such as making the gutter effectively only half wide (since the left col participates in half the gutter too) and will not look right if there are other columns near it.
I'm new to CSS-frameworks.
Normally I start my markup within the body by adding a div with the class "wrap". The purpose of that, is to get the content horizontally centered. And for having a top-, bottom-margin.
Now with Foundation I would like to keep that approach. But I'm not sure where to put the "wrap"-div.
That's what I got currently:
.wrap {
margin: 10px auto;
}
<div class="wrap">
<div class="row">
<div class="small-12 columns">
<div class="callout">
<h1>Lorem Ipsum</h1>
</div>
</div>
</div>
</div>
Demo with Foundation added on CodePen: http://codepen.io/mizech/pen/LWBOvQ
I mean: It works but I'm not sure if I do it right.
Shall I keep it the way it is? Or should I put the "wrap"-div somewhere else?
Should I perhaps leave the "wrap"-div at all (when using Foundation) and doing something else instead?
You don't need a wrap div. Foundation has a maximum width set on the .row so anything inside it will conform to that grid. If you need you can add a class with vertical margins or padding to that row. If you need a full width row you just add the class .expanded to it.
For some reason I cannot add margin between grid items
Page with margin issue
This page margin shows perfectly:
Proper page
I suspect it has to do with CSS, I tried everything but nothing seemed to work. Can someone please help?
What you need to do is move your .grid class styling to a new parent element inside your grid column, the column itself takes up a full 25% of the width of the page and has internal padding to create the illusion of margin.
<div class="grid col-sm-3 col-xs-6">
to
<div class="col-sm-3 col-xs-6">
<div class="grid">
You can see a quick example of this by moving your .grid class to the .description child element, the styling goes a bit wacky but you will be able to see the margins between your columns.
I need to design something the first one in the picture below, there should not be left or right padding.
What I really want to do is:
Two columns with background color. I've added two columns but bootstrap container and column classes adds padding and margins.
Content inside those columns must be in normal paddings and margins.
There must be no space / gutter between cols.
It must be follow bootstrap's breaking points.
You don't need to change anything in native Bootstrap to achieve this if you have two <div>s in the same <row>. Just move your left and right classes into the same line as col-xs-4 / col-xs-8. Also you shouldn't have a <section> as a parent of your <container>, you should move it be a child of container (though I removed it below, since it seems unecessary).
Example:
<div class="container"> //change this to container-fluid if you want full screen width
<div class="row">
<div class="col-xs-4 left">
</div>
<div class="col-xs-8 right">
</div>
</div>
</div>
JS Fiddle Demo
Create a nopadding class like this one:
.nopadding {
padding: 0 !important;
margin: 0 !important;
}
If you add that class to your column divs there will be no padding on them.
I have a fiddle here which shows my issue. You may need to make the 'result' quadrant wider to show the issue.
I have a couple of columns in my bootstrap layout but I can't seem to get my button to layout inside the parent div, it always seems to overlap it:
At first I thought it was due to the padding of the columns in bootstrap but I have removed that and the problem persists. I'm obviously missing something fundamental about how this is supposed to work, so any pointers to some help with css might not go amiss either.
apparently I have to link to some code to include a link to a fiddle so here is some:
My html is:
<div class="col-md-3 col-lg-3 nopadding">
<div class="definition-pallette">
<div class="row nopadding">
<div class="col nopadding"><button data-bind="click: showStepModal">+ Step</button></div>
</div>
</div>
</div>
and the additional css on top of the bootstrap default is:
.nopadding {
padding-left: 0 !important;
padding-right: 0 !important;
}
Seems to be a few things going on here. The main issue is you are using a lot of divs with a class of 'col' inside your 'row' divs. To get them to start behaving you need to define what size the col is. This fixes most of your problems. So for example, where you have this
<div class="row">
<div class="col">Some content</div>
</div>
Change that to something like
<div class="row">
<div class="col-xs-12">Some content</div>
</div>
And it starts behaving.
I also got rid of your .nopadding class as you don't need that.
Here is an updated fiddle - http://jsfiddle.net/T4XY4/1/ - it fixes most of the things in the right panel, but I'll leave the rest to you. You may want to choose which classes you actually want inside your 'row' divs, I just chucked in xs-12 for simplicity.
Edit
The Bootstrap docs confirms that if you are nesting columns you need proper col-* classes - http://getbootstrap.com/css/#grid-nesting
Its caused by bootstraps margins in the row class adding margin:0; to your no padding class will fix this but might cause layout issues in other places or on mobile devices.
.row {
margin-right: -15px;
margin-left: -15px;
}