I am working on Bootstrap theme where its responsive. I disable the responsiveness on a child theme by adding a code in functions.php. All works well , no problem.
Now the parent container, is now fixed:
HTML:
<div class="container">
CSS:
.container{width: 940px;}
But I would like the footer section to have sitewide background color. How do I able to do this?
I have tried setting different methods like width:auto, width: 200% ,but its not giving me the desired result.
Supposing this is the footer section:
<footer>
My footer
</footer>
My attempted CSS on a child theme(not working)
footer {
background: #CCCCCC;
width:100% !important;
position:absolute !important;
}
Also is this possible without setting too many !important on CSS property? Thanks.
If your footer is inside the div.container which has width:940px; then giving your footer 100% width will make it 940px wide.
You need to have the footer outside the container to give it 100% width of the body.
When you give 100% width, the element gets its container's width. So in your code, even with the important keyword, it'll get the container's width (because that what 100% is supposed to do).
Just take the footer outside of the container.
Then it'll work and you won't need this !important keyword.
As others have mentioned, removing the footer from the parent container of .container will allow the width of it to be the entire size of the viewport/document.
If you are unable to change this level of structure of the HTML due to your template, you can fake the width using pseudo-elements, like so:
footer {
position: relative;
background-color: lightblue; /* Match the color of the body background */
}
footer::before, footer::after {
content:"";
position: absolute;
top: 0;
bottom: 0;
width: 9999px;
/* some huge width */
background-color: inherit;
}
footer::before {
right: 100%;
}
footer::after {
left: 100%;
}
See jsFiddle.
Taken from CSS Tricks: Full Browser Width Bars
Related
How can I style a div with CSS to automatically fit in a gap? At the moment, I have something like this
HTML
<div id="wrapper">
<div id="auto-width"></div>
<div id="changing-width"></div>
</div>
CSS
#wrapper {
padding: 30px;
}
#wrapper * {
height: 50px;
display: inline-block;
}
#auto-width {
width: 271px; /*I don't want to have to set this value*/
}
#changing-width {
width: 140px;
float: right;
margin-left: 30px;
}
I want the div with the ID "auto-width" to change it's width based on the padding of the wrapper, and the width and margin of the "changing-width" div. I don't mind using the padding and margin values, but in my actual project, the width of the "changing-width" div actually changes depending on the amount text in it and I want to "auto-width" div to change with it.
JSFiddle example:
https://jsfiddle.net/bve8162f/
If the width of the right div is fixed, then you could set the width of the left div like so:
#auto-width {
width: calc(100% - 200px);
}
...where the 200px is the width of your right div plus the padding. If you're using a css preprocessor like Less or Sass, you could create a variable so you can define the value in one place for both styles.
Note that the 100% refers to the explicit width of the parent. This solution seemed to work in your fiddle (updated version here,) but if your production code is set up a little differently, this may not work. I'll see if I can stumble across a different way, but this is one method I personally like to use when I can.
I am trying to make this Wordpress site responsive, by adding the following custom CSS:
#media (max-width:959px) {
.container, #menu, #featured, .slide .overlay, .slide .overlay2 {
width: 100%;
}
img {
max-width: 100% !important;
height: auto;
}
#menu {
height: auto;
}
}
However, when I move the width of the browser view port to 900px say, #menu (the top navigation menu) will increase in height to accommodate #menu's LI elements which have floated down and left, but #content-full (the parent container of the image slider) will creep up over the bottom half of #menu, hiding the LI elements which have been pushed down and left.
The theme contains:
#content-full {
position: relative;
}
So why does #content-full act like it is position: absolute?
Thanks.
The problem is not with the content but with the header. The #header has an attribute height: 134px. And the #menu inside this header has been given position: absolute. Since absolutely positioned elements are taken out of context before rendering, the parent (in this case #header), would not grow to accommodate the height of #menu as expected. That is the reason why the height has been explicitly specified. The content is not behaving as absolutely positioned. It is the aforementioned behavior of the header that makes it look like that.
One workaround this could be to provide an additional style that changes the height of #header to accommodate the next row of the menu.
Something like this for max-width: 959px
#header {
height: 174px;
}
This would take care of the second row of menu items.
Note: Your background image used for the menu would then break. Because it has been made for that single row of menu. I would suggest replacing that background image, with CSS-gradients and rounded borders.
I have a page with a lot of layers for the background (five layers) which should cover the entire page content (100% height and div).
Each layer has these properties:
position:relative;
width: 100%;
height:100%;
min-height: 100%;
These properties are OK if the page content is short: the divs have an height of 100% of the window, so it's ok.
The problem is when the page is longer (look the following example). The layers have a 100% height of the browser window, not the actual content height.
That's because (I suppose) of the height:100% property. Removing it, it's fine for long pages, but not for shorter ones.
JSFiddle: http://jsfiddle.net/cfMHm/
How can I fix this?
In the tag where your content is being displayed, you could add the CSS property overflow
http://www.w3schools.com/cssref/pr_pos_overflow.asp
You can use it to trim the excess content, or add a scrollbar.
EX.
.class {
overflow:auto;
}
what about scrolling the longer content
#actual_page {
width: 990px;
margin: 0px auto;
height:100%;
overflow:scroll;
background-color: pink;
}
fiddle here http://jsfiddle.net/Jammycoder/cfMHm/1/
Instead of
height:100%
You can try:
min-height: 50% (or whatever you need it to be).
See the cyan here:
http://jsfiddle.net/cfMHm/2/
Remove the height:100% from your layers CSS.
How do you style a div in Bootstrap to span the entire width of the viewport (without fixed positioning) within the normal 12-grid system of "rows" and "spans"?
In the Bootstrap source, the navbar-fixed-top class achieves this effect using a fixed position and left and right attributes:
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
However, this navbar stays in the window regardless of scrolling. What styles are necessary to achieve the same entire width of the viewport without fixed positioning?
You can get that effect by stretching the body and html tags 100% in height and width and then defining a child div to that same width. We do that because width and height are relative, so if we define a div 100% in width/height it will only stretch so far as the body and html tag. Take a look at this example:
html, body {
width:100%;
height:100%;
}
body {
padding-top:60px;
}
.wrapper {
height: 100%;
width: 100%;
}
.huge {
width:100%;
height:100%;
background-color:#eee;
}
Demo, edit here.
Note: There is some extra height added to the body of the .huge div due to the padding-top added to the body to make way for the top navbar, if that padding is removed it will become a "true" 100% height and not 100% height + top 60px as it is now.
If you want to utilize Bootstrap 3 grid and build full-width layouts (stretching row to the entire viewport width) you should consider two things:
Bootstrap's .row class sets the margin property to: margin: 0 -15px;.
Grid content should be wrapped in a containing element to offset the aforesaid margin.
CSS
.container-full-width {
padding: 0 15px; /* Offset .row's margin */
width: 100%;
}
/* Optional. See comment below. */
.row {
padding-left: 70px;
padding-right: 70px;
}
HTML
<body>
<div class="container-full-width">
<div class="row">
...
</div>
</div>
...
</body>
Bear in mind that the .row elements will have no margin, but it can be fixed by overriding the padding property of the .row class and setting the expected margin.
Alternatively you could consider overriding .row class and offsetting a margin value, but this requires setting different values for different media/device types.
It is worth checking whether it works in Bootstrap 2 likewise.
Live example of background issue: http://webid3.feckcorp.com/
As you can see the gray stripped background image flows over the bottom of the footer and leaves about 115 extra pixels below the footer. The div that contains the background image is <div id="home_page_back"> and is contained within the body element, both of which are set at a height of 100%.
I want the background image to hit the footer and then stop … not go any further past it. Can someone please advise?
Also - I do not want to place the image as a background of the body.
Cheers!
Copy of the CSS:
body {
margin: 0px;
padding: 0px;
height:100%;
background-color: #f3f3f3;
font-family: Arial;
font-size: 12px;
color: #333333;
}
#home_page_back {
background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
display: block;
width: 100%;
height: 100%;
z-index: -1;
position: absolute;
}
I think it's the way you structured your markup, actually. Place the content below
<div id="home_page_back" style="display: block;"></div>
inside of it, remove the 100% height rule and replace it with overflow:hidden. The content will expand that div out to see the background image. As it stands now, you've made it a separate, absolutely positioned div and given it 100% height, which makes it at big as the background image you have inside it, and it expands beyond any of the content coming after it because that content now ignores it in the layout (because it's positioned absolutely.) At least that's the theory I'm going with :)
If you want the height 100% to work like that, give the body element 100% height, and the html element also 100% height.
Add overflow: hidden; to your body css.
And please, try validating your html before doing anything else and before looking for help.
#feck; may you have want an sticky footer check this answer .
Use:
#home_page_back {
background:#9C9D9B url(http://templatemints.com/rttheme13/images/background_images/abstract_background7.jpg) top center no-repeat !important;
padding-bottom: 30px;
}
Wrap "home_page_back" div around "content" div in the html instead.
Remove margin-top from #footer css.
Then, if you want it, you can add the space after the footer.