There is some whitespace to the left of the header. How can i get rid of this?
.h {
background: url('../Content/images/headlogo.png') no-repeat center;
display: block;
height: 93px;
background-color: #D60024;
}
I want it to stretch from the beginning to the end.
JSFiddle
Add this too your CSS:
html, body {
margin: 0;
padding: 0;
}
This is either the margin or the padding for the body or the whole html document, either set html, body {maring:0; padding:0} or use a css reset like Eric Meyer's.
Demo
body{
margin: 0;
padding: 0;
}
.h {
display: block;
height: 93px;
background-color: #D60024;
}
The easiest way to reset styles is to set the margin and padding on all elements to zero
CSS Reset looks like this:
*{
margin:0;
padding:0;
}
JSFiddle URL
Related
I am using sb-admin project how to set CSSpage wrapper ... it shows small background. I don't know why.
please check
body {
background-color: #000216;
height:100%;
}
#wrapper {
width: 100%;
height: 100%;
}
#page-wrapper {
padding: 0 15px;
min-height: 100%;
background-color: #F4E8FF;
}
If you're talking about the colored background not expanding with the content...I would try adding float:left on the wrapper and page-wrapper selectors in your CSS.
please help solve the problem.
there is a page fiddle. If you compress it to the width(width < 420px), the bottom scrolling appears. and it should not be because it makes the bootstrap adaptive layout:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 110px;
text-align: center;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 110px;
background-color: #fff;
}
body > .appointment_mobile > .container {
padding: 0px 15px 0;
}
please help remove the lower scrolling.
Be careful when adding padding:0 to your container. You'll break the Bootstrap logic and create that unnecessary margin.
This code is better if you just want to hide the top & bottom paddings.
body > .appointment_mobile > .container.menu_area {
padding-top:0;
padding-bottom:0;
}
.footer > .container.footer_area {
padding-top:0;
padding-bottom:0;
}
TL;DR you shouldn't do any left & right padding modification in the container class.
you can use
body {
overflow-x: hidden;
}
but actual problem is being caused by bootstrap.css:1606. which you can also override in your css (only for width < 480px)
.row {
margin-right: -15px;
margin-left: -15px;
}
EDIT :
You used to many .container class, when you use only one or two, it solves your problem.
<div class="container">
<div class="row">...</div>
<div class="row">...</div>
</div>
You can also see this answer: horizontal scrollbar appearing, row having negative margin
Here is a fiddle working: http://jsfiddle.net/52VtD/11250/
Hope it helps :)
.container > .row {
margin-left: 0;
margin-right: 0;
}
http://jsfiddle.net/52VtD/11248/
Using a simple code, there's a kind of a "border" around the header background. How can I remove this?
header {
height: 400px;
background: red;
}
<header></header>
You have to reset default <body> margin / padding.
body {
margin: 0;
padding: 0;
}
header {
height: 400px;
background: red;
}
<header></header>
It's just the default margin on body. It's generally a good idea to reset the margin and padding to 0 for all elements.
I'm working with a div that isn't positioned on the absolute left of the page, all I get is this.
Is there a way I can fix this? I've tried using many methods.
CSS:
#Hello {
background-color: #1c1c1c;
width: 200px;
height: 200px;
float: left;
}
Result
html, body { padding : 0; margin : 0; }
Add html, body { margin: 0; padding: 0 } to your styles. A common technique is to use a reset stylesheet like this to avoid these default browser styles.
My body is extending only to the bottom of my browser, but not to the bottom of the content. I need to have the background one colour, and the body content another, but i can't seem to make it work.
Here is the css
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
* html {
height: 100%;
margin: 0px;
padding: 0px;
}
html {
background-color: pink;
}
body {
margin: auto;
max-width: 500px;
min-width: 300px;
background-color: orange;
}
#header {
background: url('http://placehold.it/400x400/0191C8') center;
background-size: cover;
height: 50%;
}
#updown {
font-size: 150%;
}
http://jsfiddle.net/LPXVm/
JSFiddle
Wrap your content in a <section> (or <div> or whatever you want) and then give it the style:background-color:orange;.
Another alternative is to extend the closing </div> of updown and place it at the end of your content. Then give that a style of background-color:orange;.
But this will of course change the font-size of the whole thing.
JSFiddle - Second option.
"I need to have the background one colour, and the body content another".
This doesn't make any sense. The "background" is the . The is at the top of the DOM.
You should assign a background color to the body, and wrap all of your content in a wrapper div or content block then give that a different color.
See updated fiddle: http://jsfiddle.net/LPXVm/4/