I am a long time silent member of SO. I have always found the answers I needed up to now, hence my very first post! I cannot seem to find a solution to this issue related to twitter bootstrap.
It's a very simple example of google maps integration with the fixed top navbar layout. Everything works as expected on a desktop browser. Whenever I resize the browser window bootstrap switches to mobile layout and the expand/collapse button shows up. That works well except for the fact that my map container breaks as bootstrap seems to add some padding around the map layer. I am a new member and it won't let me attach screenshots, but I hope you get and idea by checking the site URL below. Simpy shrink the browser window and you'll see what I am talking about.
I have tested it on Android emulator as well with same results.
Site URL
Any help would be appreciated! Thanks in advance.
you need to add this to your css
.navbar-fixed-top, .navbar-fixed-bottom {
position: fixed;
}
I saw that it was
.navbar-fixed-top, .navbar-fixed-bottom {
position: static;
}
Related
Unable to fix error Google Mobile Usability > Content wider than screen in Google Search Console. I have try chrome mobile layout emulator from DevTools, set width to 320px but no horizontal scroll appears. So, all looks fine in emulator but google raises error. Then, I have add to css:
#media screen {
html, body {
width: 100%;
overflow-x: hidden;
}...
But no effect, error still persist.
Test Live URL tool don't show any error, all pages mobile friendly.
Any idea how to fix this? I'm sure this is google bug, but how to avoid it?
I have remove all "position: absolute" from classes, doesn't matter if absolute element fits on small screen fine. But that classes were assigned to hidden content what fit fine on smallest smartphone screen, also most of them were not connected to any page element, because elements were password protected.
I found a way to quicker render pages, not waiting long time after clicking "request indexing". First create new page, using site template and css, text on page should be unique(Lorem Ipsum Generator help with that). Second, create one more sitemap file with only one url pointing to new file, submit it and in a 5 minutes you'll have crawled and indexed page. That helps a lot while searching a bug in template or css.
Edit:
Since removing absolute position broke UI design, I set it back with javascript.
Check in real devices instead of emulator. Delete every section and check iteratively, you will understand which one is causing horizontal scroll
Website in question: s123c.github.io
Recently I started making a one page scrolling website as a side project and used a 'selector' portfolio. I also added a auto-scroll masthead.
I came across the issue of the next title (Side Projects) after the portfolio gallery sticking to the right side. I can't understand what triggered this happening as I can remember it working swell before.
Also #media queries have stopped working which is definitely related as the inline title "Side Projects" moves down as the window gets smaller. I feel as if the #media queries no longer work and the browser is automatically using default scaling.
Any advice appreciated (but please don't advise me to get Framework or Bootstrap. I'm aware of the options).
Not sure how the website is suppose to look but adding display: inline-block; to the id #portfoliolist is pushing that div down below all your thumbnails.
#portfoliolist {
display: inline-block;
}
I've more or less finished a simple bootstrap site for a client, however I ran into an issue where the body element seems to have an extra 160px on the right side! I've spent like 3 hours already trying to find an answer.
To partially solve this problem I added the below css to the head:
html, body { overflow-x: hidden;}
This got rid of the extra 160px however on mobile devices (only tested iOS) the scrolling action is now incredibly sticky - rather than the fluid scroll we expect on a mobile device. Instead of one fast flick of the finger making the page continue scrolling, now when the finger leaves the screen the page stops dead.
In terms of user experience this isn't really acceptable and has been a real pain to try and solve.
I've put the site here for you to try on a mobile to feel the 'stickyness' goo.gl/yEI3rn
On desktop you can use inspector to disable the overflow-x:hidden; on the body to see the extra pixels on the right.
If anyone can investigate the site and tell me any one of the following it would be very useful:
Which element in the body is causing the body to have the extra width?
Why the body element has the excess width?
Is there an alternative to overflow-x that will not create mobile scrolling issues?
Any other areas to investigate to try and solve this issue?
Thanks so much for any insight here!
you can try adding this to your css to see which element goes all the way:
* {
outline: 1px solid right;
}
I've been tearing my hair out trying to figure out why my pages based on Bootstrap responsive have an extra 25-30px on the right side in Firefox and IE when the window is <600px in width. I started to remove parts of my code one by one, until I was left only with the fluid nav bar and the Facebook SDK. Once I then removed the Facebook JS SDK reference, the padding on the right side disappeared.
You can see this here:
FB JS SDK included, extra right side padding:
https://dl.dropbox.com/u/571515/chewsy/Test/FB-with.htm
If you remove the FB JS SDK, it works as expected (no padding on right side):
https://dl.dropbox.com/u/571515/chewsy/Test/FB-without.htm
Since I need the Facebook JS SDK for the like buttons on my page, how can I work around this?
Oddly, in Safari and Chrome this does not repro.
Screenshot from Firefox:
Screenshot from IE:
As suggested by CBroe, you could try to alter the #fb-root style, but there may some JS actions that will change it again, or it may just disable some functions.
So I would suggest to add this to your styles :
html { overflow-x: hidden; }
With this fix, you may encounter one slight problem if you have a very small window and want an horizontal scrollbar. You might try this, though the padding reappears under 200px :
#media (max-width: 200px) {
html { overflow-x: auto; }
}
Tested on FF13, and IE9 (can't resize IE9 window to less than 200px).
It’s the Facebook DIV element #fb-root that’s causing this – once you set it to display:none or position it absolutely with say left:-200px via Firebug, the extra margin disappears.
However, doing so in your stylesheet might not be a good idea, since the SDK uses this element to display it’s dialogs etc. – so either those might stop working (setting it to display:none is supposed to stop it working in older IEs completely), or the SDK might overwrite such formatting again itself.
You should thoroughly test this, if you try adding formatting of your own to it.
I'm working on my portfolio website at the moment. I'm trying to optimize it for as much hardware as I can, so I've looked at my site on a tablet. Bummer. I have a footer that needs to 'stick' to the bottom of the window, which I successfully created with the following css:
footer {
position: fixed;
bottom: 0px;
height: 100px;
width: 100%
}
However, on a tablet it is not sticking to the window bottom, but hovering under the rest of the content (that's where I put it in my HTML). That means if a page doesn't have much content on it, the footer is placed on the middle of the page. I've googled around for a while, and found that some tablets don't support fixed positioning.
Does anybody know of a workaround to this problem?
All right, I'll answer my own question to sum things up.
Thanks to Darek Rossman, I've found some interesting links. The main point is that position fixed is gradually gaining more support on tablets, so it's a matter of time before this problem isn't a problem anymore. The workaround that seems to work for me is using the javascript solution Darek Rossman mentioned in his first comment. However javascript is still not working flawless on some tablets. Until better times arrive, I'll use a different stylesheet for tablets (using media queries). Special thanks to Darek Rossman who posted the interesting stuff!
The fine people at the Filament group created a plugin for this, check it out here:
Fixed-Fixed
They've also created many more great plugins for "progressive enhancement", check it out here:
SouthStreet
Keep up with them at they're website here:
Filamentgroup