I am using twitter bootstrap to design the site. I have taken time to make the site responsive. The problem is when I resize the browser, the site becomes responsive but sometimes when resized and then again maximize the display is still in resize mode. Have attached the screenshots for better understanding.
Does anyone else experience this strange behaviour of bootstrap?
P.S All the screenshots are taken in browser maximize mode.
Looks like the browser isn't rendering properly on viewport change. I used to have the same problem once but wasn't able to figure out the reason. However, I used to hit a refresh (F5) on each resize to force responsify it.
Related
When I check my site with google insight, there is no problem in responsive. But when I resize my browser manually, responsive doesn't come into play and my site doesn't seem responsive. It may even be for this reason, I'm getting a sizing error in the google search console. My website is fully responsive. So where am I doing wrong?
There is not problem with google insight
But Browser Resize Not Active Responsive Css And Not Working
Been using bootstrap for awhile and its now just had a small hickup.
Getting the same issue on their example. So for cleaner code ill use theirs...
http://newsapps.github.io/bootstrap/examples/navbar-fixed-top/
Win 8.1 pro
Using chrome 41.0.2272.101m (also just updated to this.. so noticed on previous version)
Disabled all extensions, also uninstalled and reinstalled, cleared cache.
Screen res: dual screen = 1920x1080 and 1680x1050
Problem: No nav bar content. Its rendered at over 7000px wide, and content is floated right or centered.
If I resize my window to say 700x400 the navbar gets a width of 2943px.
Also of note is that now the jumbotron on that page is now not display..
Its .container gets 1170px width? Reappears though when resizing.
Debugging chrome on my own site it appears that the viewport meta tag may be a cause. Removing that it performs fine, But also removing the position:fixed solves it. Though naturally leaves it with styling issues...
Using Dev tools and selecting a device works fine. No device, no menu....
Its like the viewport and media queries are not working correctly but ONLY on my PC?
I cant reproduce it on my home PC or work colleges. I cant find any info on it and for a responsive site the view-port is needed.
Driving me nuts.... quick fix, use FF but if clients get this issue or others have it?
Cant add screenshot as < 10 rep (sorry..)
For anyone interested.
After clearing the cache, uninstalling, resetting all settings and nothing working I decided to play around again in the 'device mode' pane again, as I figured this is the most likely place it'll be due to the view port meta tag seeming to affect it.
I use this pane to test sizes and resolutions and then turn it off. BUT there must be some sort of setting in that that stuck. Un-ticking everything and changing devices doesnt work..(and resetting didnt either) but you will notice a circle icon with a cross in it in the top left. Like the 'ban' symbol and hovering over it will say 'reset all overrides'. Click it..
No idea HOW an override gone in there, or why resetting the browser, uninstalling etc would not reset them.. or where you can find them, but there you go. Problem solved.
#Logan I was having the same issue. Resetting the override doesn't work for me but switching Chrome to a new user does, bizarrely.
When viewing my website from an iPhone or iPad my site displays just fine when scrollbars on present. However, when you access a page when scroll bars are not needed the display gets messed up. I have no idea how to resolve this issue. Any ideas?
For an example my website is www.surfboardswap.com. The homepage appears fine on a mobile device. But if you access www.surfboardswap.com/alerts the display does not fit on the page since scroll bars are not needed.
Thanks for the help!
It looks to me like both those links you provided render with scroll bars depending on the width of my browser screen. I think you're ultimate issue here is responsive design.
You have a width set on your .container css selector. This is breaking the responsiveness of you're site, because it's being forced to that width even on smaller screens. Try removing that!
I'm facing a problem I can't figure out how to solve. I'm almost sure this is a Chrome bug since in other browsers it works like a charm but I want to be sure. On my website, developed using a mobile first and responsive design approach, I have a menu that uses the Left Nav Flyout pattern. On Tablets and desktops, I show it full width.
When I load the website on my smartphone (specifically an Android device) using Chrome in Portrait mode, once I rotate the device (passing in Landscape mode) and start to scroll the page, as soon as I reach the menu position, the latter magically disappears. What is really strange is that if you try to click the space that now is completely white, you can see that the links are actually there. I tried to use the inspector to find the problem but didn't succeed.
So, wow can I solve the problem? Anyone else had this issue before? If you know it's a bug, I'm glad to add a temporary workaround as well.
I didn't find a real solution but a reasonable workaround. Of course, I still hope that someone will explain what's the cause of this issue and how to solve it.
In the meantime, I found that the problem occurs because the menu, 240px wide, is completely out of the viewport. In fact, as soon as I changed the margin-left to 239.5px the menu didn't disappear anymore.
I have a wordpress ng gallery template: http://bit.ly/LTJ9ee, the lightbox of which behaves oddly in chrome when a video is embedded on the same page. The problems only occur when:
Using chrome (v23). Tested on all other major browsers (windows 7) with no problems.
If the page is too big for the viewport (has scrollbars)
There is an embedded video in the page, and the video has already been started (same problems occur whether html5 or flash)
If you look at the page here: http://bit.ly/123NW1C, what seems to be happening is that under the above conditions only, the lightbox is not moving to fit the viewport as it should. This makes parts of it display twice and parts of it not display at all. Web inspector says the divs are positioned correctly, but 'as seen' they are not.
I'm currently stumped on this. The wmode fix didn't help, nor did anything else I found online. Any ideas on what this is likely to be? A bug in chrome? Or something about the way this lightbox interacts with an embedded video.