I hope you can help me to solve this problem, I'm using a responsive menu plugin (eDs responsive menu, it uses sidr) on a WordPress site, I tested it on android with default browser, chrome & cm browser.
In chrome displays correctly, but in default browser & cm browser when I open the responsive menu, It's in blank, the same happens with safari on iOS.
I think that it's maybe because some incompatibility with some CSS tags with those browsers but not sure which ones, Can you give me ideas so I can try to find out what is going on.
Here are some image samples:
Blank menu in default android browser
Menu displaying correctly in chrome
Maybe this answer doesn't apply por everyone and is not complete, but the problem is the css tag: position: fixed combined with some transitions, it's android default browser and safari problem. I haven't found a fix for this yet.
Related
Can somebody tell me why when I open this website template with Chrome from Android I cannot see the background?
https://html5up.net/uploads/demos/highlights/
If I open the same link with Firefox for Android, the background shows up with no problems (everything is also fine with all browsers from the PC). I tried changing the CSS in a zillion ways, but I still got the issue. Any idea to fix it?
Works fine in Chrome & Firefox ( both PC and Mac ).
basically it's a slidetoggle and that works, but based one the display:block of the elements it is basically transparent in the browsers cited above [meaning you can click and it will take you to it's linked tag].
The site has one breaking point at > 1230px, then it basically gets responsively smaller until you hit < 700px where the navigation will change.
Please help if you can and have experience working with browser sited above
Look at the code here: http://www.testing.sixstarproductions.com
Ok I got it. I have a fixed header with a fixed nav inside it, what I need to do was make overflow:visible on the header element.
It worked on Chrome and Firefox beforehand but not Safari or mobile browsers, so in case anyone came to this issue now you have an answer.
Thanks for looking
My personnal website is all messed up when i display it on Android devices.
I've tested my site on all major browsers on Windows and Mac OS X:
- IE7 to IE10
- Chrome
- FireFox
- Opera
- Safari
And they all display my website correctly.
I've also tested on some Apple devices and they also display correctly.
But I've tried on a Nexus 4 and a Nexus 7 and the layout is all messed up.
The page is all zoomed out and the menu seems to be outside the viewport.
I'm lost here and any help would be appreciated.
http://www.narcissusphoto.com/
You need to add media queries in your css to look your website for mobile devices. Please refer the below link and accordingly you need to make changes in css.
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
Try removing the fixed background on the body element.
I would like to have my web app hide the browser tabs and address bar on Chrome on mobile. document.documentElement.requestFullScreen() seems to have no effect. window.scroll(0,1) doesn't work either on tablets.
If possible, I'd also love a good solution for Chrome and/or Safari on iOS.
Any ideas? I'm on Chrome 29 for Android.
Check this sample: here
try to use webkitRequestFullscreen()
Also "Lowercased the "S" in requestFullscreen() and changed document.webkitCancelFullScreen() to document.webkitExitFullscreen(). Updated browser compatibility comment."
via
Let-Your-Content-Do-the-Talking-Fullscreen-API
Maybe there's some magic I don't know about with scrolling on Android?
I've got a website that works fine in IE7, IE8, IE9, FireFox, Chrome, AND Safari on desktop. It also works fine in Safari on iPhone.
However, one of my Android 2.3.7 friends informs me that he has Opera and the default browser on his Android. In both of those browsers, the scrollable view doesn't end at the bottom of the page. When you get to the very end where the dark grey footer ends, you can go right past it and see solid cream-colored background going on for miles of scrolling!!
I have NO IDEA what could cause this!
Can anyone throw me a bone here?
Here's the site for anyone who might have Android 2.3.7 or another version of Android to test. Like I said, happens in both default AND opera browsers.
http://wwwa1nbkclientsitecom.zippysites.com/
UPDATE: I removed the overflow-y property from the HTML style tag in the stylesheet. I had another Android 2.* user test it. Its still broken. And now my next guess is that this might be broken due to the fancy floating menu at the top. Early versions of Android only had partial support for position: fixed
I'll try disabling the position: fixed menu and get it tested again.
UPDATE 2: I got it tested. Its still broken. I'm presently installing Google's Android SDK for the Emulator functionality. It'll let me specify old versions of Android to test. If I narrow down the problem, I'll post the answer here. Until then, if anyone has an idea of what's going on, please post your idea!
It works fine for me in the latest version of Chrome on an Android 4.0.4 tablet.
However, I think the problem may lie with the other browsers' interpretation of overflow-y: scroll; on your <html> tag.
Try removing that property. You shouldn't need it on the <html> tag anyway.
It was the dynamic google map in the footer. It had nothing to do with my page layout or style. Everything I did was fine. Removing the dynamic google map fixed it. SOLUTION: Replace with a STATIC google map. Its kind of bad to be using dynamic map embedded in page for a mobile device anyway.