I'm trying to implement a responsive navbar. It seems to work, but when the screen gets smaller, there appears a gap on the right side. See screen shot:
I haven't written any CSS. All of this is pure Bootstrap still.
Update 1: jsFiddle
http://jsfiddle.net/BaR3q/ - It's doing it on JSFiddle, too. So either I did something wrong (likely) or Twitter messed up (unlikely). what to do?
There is nothing in the markup that specifies that the elements should expand to fill the viewport. Adding body { width: 100%} will take care of it, or optionally overriding the width of the navbar to be auto.
Twitter Bootstrap is intended to be scaffolding and components rather than an out of the box solution, so this is likely one of those things that needs to be specified. The static version of the navbar is likely written so that it can be easily used in containers other than the body and this happens to fall in the 20% of situations where it needs a nudge.
A few potential reasons come to mind, but as others have pointed out it's difficult to say without seeing code. I'll add, though, that I understand how tough it can be to share enough of your code for something like this without giving too much away. So here are some questions (and for this specific issue, you shouldn't use .container-fluid as previously suggested. that probably won't work anyway, and if it does it's only masking a problem that might compound):
did you change any responsive styles? If so, did you change the width, padding, or margins on .container?
Did you apply a width or margin to the .navbar itself somewhere in the responsive styles? This seems a likely cause to me.
What about <body>, did you set padding on that?
I solved this problem by adding (either) one of the following meta tags:
<meta name="viewport" content="initial-scale=1">
<meta name="viewport" content="user-scalable = no">
Related
Apologies in advance for the rudimentary nature of this CSS question.
I'm trying to figure out how to deal with widths in CSS. I have an absolute positioned <div> containing a fairly wide table. The <div> is "1300px" in width. Everything works fine on desktop browsers. People with high resolution monitors see the entire table. Those with low resolution, or those who are viewing the page from a smaller browser window, are able to horizontally scroll the div to see the entire content. All is good.
But something different happens on the iPad2 (Safari) which has a native resolution of 1024px. I expected the iPad to show the first 1024px of content and allow the user to horizontally scroll (swipe?) to see the remainder of the table. Instead, it seems to be trying to cram the entire 1300px into the 1024px screen and then shrinking the type to make everything fit.
What's the standard way of using CSS to tell the iPad browser to show whatever it can at it's native resolution (i.e. 1024) and then allow the user to swipe/scroll horizontally if he wants to see the rest? A small snippet of code would be helpful.
Thanks.
By default iOS Safari will scale down any page to fit the screen. If it's not your desired behavior you can instruct the browser via meta viewport tag in the <head>.
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
Edit: more in-depth explanation: http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/
I don't have an iPad so I can't see, but a few points:
Your xhtml is not valid. <center> doesn't exist anymore (and by the looks of things isn't actually needed in the design anyway), also you should specify the dimensions of any the header image in px.
Don't know why you're using margin:auto on anything other than the mainwrap. Try margin:0; instead.
Try adding * {margin:0; padding:0} to the top of your stylesheet, and then adding in any extra padding and margin you need later - this will more or less set all browsers to the same starting point when it comes to layout.
If you don't want a border use {border:none} (if you say border: 0px solid; some browsers will still try and draw something)
This might not fix the problem, but it will be step in the right direction as the more valid your markup is the easier browsers find it to render.
Try removing width:100% from any of the parent element, then try to fix it.
Hope that it works for you.
So I did notice that zoom related layout problems are commonly being dealt with, but I couldn't find an answer to my case - I wrote a WEB calc, and the buttons just slide out of place when zooming in and out, in Chrome and Firefox but not in IE. What is the way to fix it?
Give width:220px to your #main div
If you closely look at your CSS you will see that the buttons together(5 in a line) actually have more width than the Main div while resizing. Increasing the width to 220px solves that problem. Another solution could be to give max-width and max-height to all elements, another can be to properly layout your elements and don't just rely on the browser's positioning. Doing the latter is an trivial task.
For the sake of searchers, my solutions was to use a table to make the calculator eventually. I know using tables for layout is considered a bad practice, but considering a calculator shape is not supposed to adjust to new contents or to the size of the end-user's screen (at least in my case) it seemed to be the best implementation. It was the only way to avoid losing the layout shape in zoom-in zoom-out, which is kind of what div's are all about.
I've been trying to make a custom lockscreen work with the iPod Touch 4G. It works quite well, but for some reason it sets the wrong body size. Normally, the body size will fit in the size of the screen but when I move the lockscreen (I move the lockscreen to unlock) I can clearly see 'body spaces' near the bottom and right edge of the lockscreen. In this case it's colored black because I set the body background-color to black. I tried setting the body size manually but it doesn't have any effect.
Here you have the complete code, although note that it works perfectly fine with a PC screen.
Here's another WP7 lockscreen which doesn't have this issue. Maybe you can find something particular in the CSS that might solve the problem. BTW, the three folders in next to the html/js are irrelevant, but just so you have the full theme.
I don't see you using the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
There are variations of that. For further explanation: David Calhoun
You tried to reset the css? It's probably a browser issue of padding or margin...
I cant really test, but try do add the reset.
You can search on google or use this one: http://meyerweb.com/eric/tools/css/reset/
Set your image to display:block - an image is an inline element by default, and will be affected by setting your body to font-size:50px.
I'm banging my head on this one.
I have a disturbing horizontal scrollbar that appears only when browsing my site in IE7:
http://www.regia.it
I have tried and tried to stop this from happening by using overflow:hidden on my divs but for some reason I just can't seem to find what is causing the problem.
Any help is greatly appreciated.
This does seem odd. I am assuming you don't mind if the page is not horizontally scrollable even on small screens, since you have tried to use:
body{overflow-x: hidden;}
In which case if you apply it to html rather than body it should do the trick:
html{overflow-x: hidden;}
I wouldn't really want to implement this long term, but if you are looking for a quick fix this should be ok as a temporary measure until you can work out what is going wrong. I would also put it in a conditional comment so as not to ruin the experience for the majority of people on modern browsers.
<!--[if IE 7]>
Link to alternate style sheet
OR
<style> /*CSS in here*/ </style>
<![endif]-->
EDIT : I have found the cause of the issue, so there is no need to use the above workaround. As I had suspected the issue was related to absolute and relative positioning.
You just need to remove position:relative from .grid_2 and .grid_12 and the scrollbar will disappear.
I came across this vexing issue too. I had a table in a div, and these were inside an outer div. When I removed the style to make the inner div width:100%, my 'IE7 only' scrollbar situation disappeared.
Hopefully that is somewhat helpful.
I have a #main div nested within a container div that I want to fill the page down to the sticky footer. I've tried several angles, but can't seem to get it to work. If you don't use firebug, just ask and I'll provide CSS, etc.
Thanks.
site: http://www.dentistrywithsmiles.com
I've tried to do sticky footer many times and I never seem to learn that they are really hard to do. Your situation seems complicated and what you have now doesnt seem half bad.
I think I would use JavaScript to detect page resize and adjust the heights appropriately. Either that, or do something tricky with background images spanning both the footer and #main.
That's probably not what you want to hear but this is a tough problem for only using CSS - tougher than I would care to invest in.
With Jquery
http://css-tricks.com/snippets/jquery/jquery-sticky-footer/
or css only:
http://www.cssstickyfooter.com/using-sticky-footer-code.html
or
http://www.pmob.co.uk/temp/sticky-footer-ie8new.htm