For some reason my website only renders properly on mobile devices?http://www.brandsondigital.com is built using a wordpress theme named beatrix http://simpleqode.com/preview/beatrix/1.0.1/default/index.html - using bootstrap and other scripts. It now doesn't render properly on desktops - fine on mobile devices? Any idea of where the conflict is that is causing this and how to resolve?
p.s It was fine in browsers desktop and mobile until the beginning of this week (firefox gave in months earlier but it was bearable). The placement of the content is knocked out of position on chrome and firefox but not safari. Lifting the bottom content to the top of the page and not showing the full page content.
This is margin collapse
Try to add overflow:hidden; and clear:both on .section
Related
I am calling this javascript on page load
document.body.scrollTop = document.documentElement.scrollTop = 0;
I want html page starts from top when loaded, above javascript working fine for chrome, safari(macbook) but not working for safari on iphone,
can anybody suggest workaround in javascript only.
Posting this here for future visitors from Google.
This same error occured to me... The problem was just one CSS rule on body element.
overflow-x: hidden
If this CSS rule exists, remove it and scrollTop should work on mobile Safari.
As I tested this before, there are problems rendering on ios, but it also depends on the version of the OS for example, for an iPad pro, there is no problem! But on iPad air you there isn't much to do! so what you can do is to make your code compatible like:
document.scrollingElement.scrollTop
it should give you the right solution.
I'm creating a web page with some scrolling effects. Here I used skrollr plugin. But, I'm having some problems on mobile browsers. Specially on chorme.
The web page works great on desktop browsers but the page is not scrollable at all on mobile browsers.
Visit this link on a mobile chrome browser :
http://www.geniusamigos.com/mystuff/vr3/4.html
Is this a common problem or it's just me ?
Thanks...
I have recently released my home page in which I use carousel + Twitter Bootstrap + retina.js.
http://www.stelab.nagoya-u.ac.jp/~okumura/index.html
When I access this page with my old MacBook Pro (non retina), it shows the carousel as expected. Three images are automatically shown with a nice transition. But when I open the same page with my retina MacBook Pro (Safari 6.0.3 + OS X 10.8.3), one or two images are not shown.
Retina.js seems to be working properly with my retina MacBook Pro, because the image in the following page is automatically changed to the high-reso version of my picture. Therefore, I think that the combination of carousel and retina.js does not work under certain conditions.
http://www.stelab.nagoya-u.ac.jp/~okumura/profile.html
I get the same result even if I use Google Chrome (26.0.1410.65) or Firefox (20.0) on my retina Mac.
Could anyone tell me how to make my home page work properly, please?
Carousel (Twitter Bootstrap) http://twitter.github.io/bootstrap/javascript.html#carousel
retina.js http://retinajs.com
This is a known issue with retina.js and carousels. It has been reported here: https://github.com/imulus/retinajs/issues/84
This jquery plugin fixes the problem :
https://github.com/tylercraft/jQuery-Retina
You can use suffixe (image-x2.jpg for example), or use any selector.
It works perfectly with ajax loading too.
In my android application i used some html pages with various details, it can be viewed perfectly in browser(i.e- we can scroll up & down). But the same page can't have scrolling option in android and it can't move (i.e- it became static)
Is it on android version 2.2 or lower...well then scroll bar don't work in that version. For that you'll have to use a plugin like iscroll. check here http://cubiq.org/iscroll
I know its pathetic that a basic feature like scroll is not working but its a bug in adroid.
I am working on an application in which i have div as shown below
HTML:
<div id="commentDiv">
CSS:
#commentDiv {height: 458px; overflow: auto;}
In this div, comments are being populated from service. but the scrolling of div does not work in android though its working fine in all browsers and other devices like iPhone and iPad.
can any body solve this problem please its urgent.
No you can't.
The Android browser does not support scrolling of elements other than body.
In other words: overflow: auto isn't supported.
This has been filed as a bug a few years ago and it still isn't fixed.
http://code.google.com/p/android/issues/detail?id=6864&q=scroll%20android%20inner&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
or
http://code.google.com/p/android/issues/detail?id=2118&q=scroll%20android%20inner&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars
It works in alternative browsers, like Firefox mobile, though.