My site not scroll vertically at all on mobile.Its happening only on all mobile mobile devices but when i have checked on responsive checker website its scrolled.Hopefully someone here can figure out where the problem is.I don't know how to solved problem.
This is probably due to a JS error you are getting in the mobile browser.
try removing the JS files just for testing.
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
I have a custom checkbox and a weird border appears around my checkbox SVGs. On the website web app, tablet, and Andriod devices it doesn't appear. Only on IOS, Has anyone come across this before and know of a fix. I have spend days looking for a fix, doing CSS hacks, googling and working with other dev's on the team and trying to find a way to inspect on mobile, but to my knowledge, not a possible thing to do on a mobile browser. Attached is the image.
I'm working on a responsive website with lots of CSS3 animations (keyframes).
As much as it works good in a desktop Chrome browser, the site is too heavy for mobile and crashing it's browser or even sometimes restart the device LOL.
I'm new to both responsive and CSS animations, and will like to get your help to optimize the animations so they will work on mobile devices without crashing them.
I already changed all my animations (keyframes) from using position top/left to transform translate3D.
And I also set the animation-play-state to "paused" by default, and changing it to "running" only when you get to the area of the element (when it's in viewport).
What more can I do please? or, do I can't do anything about that and should always pause the animations on mobile devices?
You welcome to answer me in general, or visit the site in the next link -
* DO NOT open it in a mobile, it may restart your device! *
Open it in latest Chrome or Firefox: http://goo.gl/BVsVH7
Again I'm new to both responsive and mobile, and I have no idea what I should and shouldn't do.
I think it is hard to make this work well on mobile devices today.
I ran your website on google pagespeed and there are plenty of stuff you can make better. Paste your url there and you'll get a bunch of tips for optimization.
Google PageSpeed Insights
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 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.