I'm trying to create a sticky footer in bootstrap, and am using the default template provided here: http://twitter.github.io/bootstrap/examples/sticky-footer-navbar.html
It appears the example provided has a problem; when the page is viewed through a smaller resolution, the navbar collapses (as it should), but then the 60px padding that originally kept the content from hiding under the navbar creates a large gap between the navbar and the content.
Any ideas?
Thanks
One easy way to change this behaviour is to remove the 60px padding when the navbar collapses. Something like this should do the trick:
#media (max-width: 979px) {
#wrap > .container {
padding-top: 0;
}
}
You might have to change the div names to match your naming.
Good luck!
it should maybe be
#push, #footer {
min-height: 60px;
}
instead of just height
Related
I have a problem with my website. (www.cemf.ir). The footer has three columns and everything works fine (links are clickable) when it has three columns. However, when I resize the browser and the width gets smaller, the number of columns in the footer becomes one and only the links in the last part of the footer works. I guess there is something wrong with .column-wrapper class in the css when the screen width gets smaller. Can anyone help me?
Setting the float of the last column wrapper should work.
#media screen and (max-width: 767px)
.site-footer.three-col .column-wrapper:last-child {
float: left;
}
For some strange reason whose cause I can't find out, the very last .column-wrapper in the footer covers (although transparent) almost the whole screen on mobiles, including most the other footer elements, and also doesn't let any mouseclicks through.
In the browser code inspector adding the following CSS setting made the links in the other footer elements clickable:
#recent-posts-5 {
pointer-events: none;
}
I could find a good solution for it. I used z-index property as you see below:
#media screen and (max-width: 767px)
.column-wrapper:last-child {
z-index: 1000;
}
.column-wrapper:nth-child(2) {
z-index: 1001;
}
.column-wrapper:first-child {
z-index: 1002;
}
z-index put columns layer on layer and the problem of the last column-wrapper was solved, since it is now under all the columns in the footer.
I have strange problem with website responsiveness.
When on desktop resolution no horizontal scroll appears at Chrome.
When i resize it to lower resolutions 400px width and less the horizontal scroll appears.
I think some element is forcing width bigger than actuall screen size but i cant find it!
Please help.
Here is website link
I checked your code,
You have to get rid of this code in your footer styles. Your margin-right is making your content overflow.
Try using padding, or something similar instead.
It appears you are using bootstrap for that.. So the best way to do this would be to overwrite this by creating a
#footer > div.row {
margin-right: 0 !important;
}
or if you have bootstrap locally then you can probably delete from there. But i just overwrite it using `!impornat
.row {
/* margin-right: -15px; */
margin-left: -15px;
}
http://library.skybundle.com/
I need the two big icons to be horizontally side by side until the window is resized to be smaller (like that of a mobile phone, for example), and then when that happens, the orange one on the right should drop down below the green one to form a vertical layout.
I know I should use media queries, as I have been told, but I am not sure how to do this or which ones to use.
I am not great at CSS, but I am learning. I have done TONS of research, spent weeks trying to figure this out. Please help. Thanks!
Make sure this is below your other rule for .skone-half.
This should work
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
}
Just comment if it doesn't.
Here's a really simplified version of that portion of your site in a fiddle.
DEMO
So according to that fiddle you can tell the code works. If you have problems implementing it let me know or if it just doesn't work for some other reason. You could also adjust the point in px it changes at if you want I just set it to when it breaks the width of the container.
EDIT:
Usually though you would want to change the width of the containing element from a fixed width to 100%, this way the images center, like this.
DEMO
In your case you have two containers with widths that you need to change so it would look like this.
#media(max-width: 960px) {
.skone-half {
width: 100%;
}
#container, #head-content {
width: 100%;
}
}
Add this to your css file:
/*if the screen is 800 pixels or less */
#media only screen and (min-width: 800px) {
.page {width: 100%; } /*set your page class to be 100% width */
}
Here's a starting point for your jsfiddle (which exihibits the side-by-side -> vertical layout!).
http://jsfiddle.net/gjGGw/1/
HTML
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/PRODUCT_TRAINING2.png" />
<img src="http://library.skybundle.com/wp-content/uploads/2013/10/EDUCATIONAL_COURSES2.png" />
CSS
img{width:300px;height:300px;margin:0px 30px;}
I created this site off of a PSD, all relatively elementary CSS. I have unwanted outside padding on a mobile device AND a tablet. I want the left and right edges of the site to be flush with the edges of the browser. Its about 20px of unwanted padding.
Please see my dev site:
http://america.82ndmedia.com/
I have tested removing the "margin: 0 auto" of the container div and it fixes it... however I need that for it to function on a desktop.
.container {
width: $w_total;
margin: 0 auto;
}
Any tips would be greatly appreciated. Thank you!
This is being caused by the rule:
#media (max-width: 450px) {
.header, .columns > .sidebar, .post_box, .prev_next, .comments_intro,
.comment, .comment_nav, #commentform, .comment_form_title, .footer {
padding-right: 13px;
padding-left: 13px;
}
Either remove or override this rule somehow.
I'd recommend using percentages instead of pixels because your current setup won't work and is hard to maintain using hardcoded pixels for a responsive design.
For example, you have your main wrapper div class="container" set to a max-width of 717px on smaller screens (which seems random), but inside of it you have elements like id="blog" set to a width of 1020px, which obviously won't fit.
If you set those inner elements to percentages of their outer container, it'll be a lot easier to make it work and it'll be truly responsive or fluid.
The default height of navbar in Twitter-Bootstrap is too small. When height is increased, it encroaches the divs below.
How can I increase the height of the navbar that slides the entire page down? If this is possible, how to place navbar links to top / bottom of the navbar.
I'm pretty sure I don't love this solution but it works for the amount of time I have to spend on this.
.navbar .container { height: 2em; }
I had to also add some padding-top in the same selector to get things inside the navbar to vertically align nicely.
edit: I just re-read your question and saw you're having trouble with the "divs below". In doing this you need to adjust padding on the body tag as well, e.g.
body { padding-top: 6em; }
per the Twitter Bootstrap docs on Navbar:
When you affix the navbar, remember to account for the hidden area
underneath. Add 40px or more of apdding to the <body>. Be sure to add
this after the core Bootstrap CSS and before the optional responsive
CSS.
Adding a padding like that is not enough if you're using responsive
bootstrap. In this case when you resize your window you'll get a gap
between top of the page and navbar. A proper solution looks like this:
body {
padding-top: 60px;
}
#media (max-width: 979px) {
body {
padding-top: 0px;
}
}
Source:
Twitter Bootstrap - top nav bar blocking top content of the page
you can try this one. it works in any size of display.
.navbar .container { min-height: 83px; }
.navbar-fixed-top {
position:static;
margin-bottom:20px;
}
</script>
$(".dropdown-toggle").click(function () {
$(".nav-collapse").css('height', 'auto')
});
</script>
This solved a similar problem of mine, (The sub menus was not appearing because of the small parent ul height, on the first click) maybe it works for you as well.