Unwanted padding and margin in Bootstrap 3.3 - html

I am using Bootstrap 3.3 for a simple layout and the way I have it is:
For the body,html:
html,body{
background: #fff;
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
and then on each child section I have the following code:
.section-name{
height:100%;
}
so that each section takes up 100% of the given device screen size. Now I don't know why but I have quite a big gap between each section, see the screen shots below:
Notice the gap between the section, here's another screenshot:
Now I went to the dev tool, in both Mozilla and Chrome, checked for any excessive padding or margin issues, but found none.
Then I checked if it was because of the white spaces in my html, took off the whitespaces and still that wasn't the issue.
I took off all the Bootstrap CDNs too, just to check if it was a Bootstrap issue and no it wasn't, even in the custom CSS I have written, the same issue persists.
I have even tried:
*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
Even that wouldn't take off the padding
Edit
Js fiddle depicting my problem

I think I have found the solution you had a h2 inside your .section name that took margin-top of 20px,
Here the js fiddle
.section-title {margin-top:0px;}
http://jsfiddle.net/u2ttpkhg/1/

Is better if you could provide a fiddle, but here goes some things that I need to do sometimes:
Try to check above level elements too.
Also, you're using jumbotron? If so, it adds a top/bottom padding of 48px (via media query), take a look in that. Bootstrap has, by default, many classes which add unwanted paddings and margins.

Related

Little issues with page's layout

How to delete automatic 8px white margin on page's right side? With the help of answerers I have fixed it in browsers on desktop, e.g. chrome (v48) and IE (v11). And also fixed it in chrome on mobile, but other mobile browsers still shows that margin. Could anyone please help me with that?
PS.
E.g. https://css-tricks.com/ doesn't have right-border at all on total page
But e.g. http://www.voice.fi/ does have right-border on desktop but not on mobile.
Via our back-and-forth in comments, here's an answer to remove blank space on the right in mobile.
CSS
html,body {
height: 100%;
margin: 0;
overflow-x: hidden;
padding: 0;
width: 100%;
}
I think what you need is this at the top of your CSS file:
* {
margin: 0;
paddding: 0;
box-sizing: border-box;
}
This removes the automatic 8px (in Safari) margin of the body.
#Josh S. I found the solution. First, well as you said I used reset CSS from this website: http://html5doctor.com/html-5-reset-stylesheet/
And then I used in my screen styles CSS these:
body {overflow-x: hidden}
nav {overflow-x: hidden}
And voila, now it works in all desktop and mobile browsers.

CSS behaving differently in IE and Chrome

I'm trying to create a small navigation menu, however IE seems to render it differently, completely messing it up.
Here's what html/css I'm using (jsfiddle renders it correctly, as does chrome):
http://jsfiddle.net/Seytonic/gmp975sm
However IE renders it like this (I omitted the bootstrap in the jsfiddle):
EDIT: I'm using IE 11
This is one reason why it's important to declare a width on floated elements. If you don't, the box size may render differently across browsers.
Try adding width: 330px to the #navigation container.
Revised Demo 1
The 330px is just for example. You can use relative units, like percentages or ems, as well.
Again, to avoid unpredictable browser behavior, also specify a width for the two floated child elements:
#navbar li { width: 49.5%; }
Then adjust the spacing between the boxes on the top row:
#projects { margin-left: .5%; }
#about { margin-right: .5%; }
Lastly, width by default only includes the content box. Make it also account for padding and border with box-sizing: border-box:
html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit;}
Revised Demo 2

Padding behaving different between browsers

I got this project going on and I have a container with a gradient fading from transparent to white fixed at the bottom. My goal is to make the container look like it's fading in as the user scolls.
BUT I have a problem, the content at the bottom of container is sort of hidden by the gradient itself. I decided to add a padding-bottom to the container so the content would 100px far from the bottom (exacly the height of the gradient, 100px)
It worked exactly as I expected on Chrome, but on Firefox and IE the padding is not "taking space".
This is my css relatively to the container
.container {
width: 85%;
margin: 0 auto;
overflow: auto;
padding-bottom: 100px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
If you still would like a link to the main project so you can see it in action and maybe get a better view of the problem click here
I would really appreciate some help on this. It's the only thing I'm missing to end the project.
EDIT: If I am not being clear enough, please ask questions.

CSS: 100% is larger than page width?

I'm busy with a new website. For the menu bar, I put the width on 100% to be seen here:
font-family: 'Champagne';
font-size:20px;
display: block;
z-index: 1000;
bottom: 0;
width: 100%;
background: #0193CF;
text-align: right;
padding: 0 2em;
margin: 0;
text-transform: capitalize;
But for some strange reason, the width of the menu bar is actually longer then the rest of the page. Take a look at the screenshot at the bottom.
Does anyone have any experience with this?
The problem is a combination of width and padding properties. Padding, in the typical CSS box model, is additive. If your box width is 100%, the padding applied to it will add to the width. The width would therefore calculate at a number greater than the size set in your width property.
I would suggest using the box-sizing properties in your CSS, like so:
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
width: 100% + padding: 0 2em, is equal to something greater than 100%. By using the box-sizing property in your style sheet, you will tell the browser to include padding's as part of the total width.
box-sizing:border-box...
This basically takes into consideration the margin and padding when calculating the size.
A more detailed explaination on the box-model is outlined for you here:
http://css-tricks.com/box-sizing/
Another option to cover most cross-browser problems is to try using a reset to zero out all elements and bring you back to a true "start".
many browsers add their own little tidbits of padding oand spacing on specific elements, so a reset is often used to, well, reset your browser to a true "square one"
Here is one of the more popular ones:
http://meyerweb.com/eric/tools/css/reset/
But this site reviews a lot of them:
http://www.css-reset.com/
If box-sizing doesn't fix this problem for people, check your top levels of your CSS - I found a rogue width:100% for the <body> CSS once.
My technique for debugging these problems is to open Developer Tools and delete blocks of the page (i.e. major <div>s) one at a time: if removing any of them causes the layout to snap back into place that indicates the one you just deleted was causing the problem.
width sets the content width which does not include padding nor margins.
Try removing padding or changing the box sizing.

HTML div child nodes aren't aligning

I'm editing a basic Wordpress template and looking to have a multi-column front page (showing 2 sets of articles per row). I've done the following in CSS:
.front-page-container article:nth-child(odd) {
width:50%;
float:left;
clear:both;
}
.front-page-container article:nth-child(even) {
width:50%;
float:right;
}
where front-page-contaner is the class of a containing div. The HTML structure is:
<div class="front-page-container">
<article id="post-1"></article>
<article id="post-2"></article>
<article id="post-3"></article>
<!-- etc -->
</div>
I want to align post 1 & 2 in the same line, and have post 3 (and 4) on the next row.
While the CSS sort of works, the two posts I want together don't line up as shown is this picture. I've tried adjusting the widths in case there was some sort of overlap but it doesn't fix the issue (even though they get visibly smaller).
Any help/pointers would be appreciated :)
.front-page-container::after { clear: both }
.front-page-container * {
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.front-page-container article:nth-child(odd) {
width:50%;
float:left;
}
.front-page-container article:nth-child(even) {
width:50%;
float:right;
}
That should do it. Box sizing makes the divs width the calculation of width minus padding and borders. So no padding or bordering will add to the declared width. (I think thats the best way to explain it). The ::after pseudo-element clears any floats after the container.
As a bonus I will add that this article helped me immensily with this subject:
http://css-tricks.com/dont-overthink-it-grids/
You posted code works as expected. See http://jsfiddle.net/XqDn6/1/
The issue is most likely some margin/padding on the article elements causing the width of each element to exceed 50% and so not being able to fit 2 in a row..
One way to solve this problem is to use box-sizing: border-box which means that border/paddings are included in the width value.
.front-page-container article{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
Demo with border/paddings and box-sizing: http://jsfiddle.net/XqDn6/2/
It works just fine for me: http://codepen.io/skimberk1/pen/6127d1c3a4961de1f9c1ef20d5400d0f.
I have no idea what could be going wrong in your case. Maybe some other CSS is affecting it?
Using the CSS box-sizing: border-box; might help, as it makes it so that the maximum width (including padding and border) is the width you defined (in this case 50%);
The problem is clear: both, as read in CSS schools,
No floating elements allowed on the left or the right side of a specified paragraph.
Here's an exampleo f how clear can be used: Understanding the CSS Clear Property.
Though float is an old solution used for stretching the container, as can be seen here: Clearing floats.
Solution: delete that if you can or edit the question for saying why its there (and cannot be taken off) so we can help you further.