On mobile devices, scroll down does not work when the services tab is clicked. I can't find the problem for hours. Anybody have any ideas?
The problem is class="page-overlay" have position:fixed;.
If you for example set it to absolute or none all work.
Brand Identity and Online Marketing do work. I opened the developer tools and saw that the div.logo.white is on top of the first two h2. That is probably what causes it, because the functionality works fine. Other than that, great layout and style.
Related
I'm building this website with cargo collective and I'm having problems with the scroll of some pages, especially this one:
https://civitonia.cargo.site/26993899
After speaking with them they told me that is a problem related to the css and that they cannot put their hands on it. I can't figure out what's the problem about the scroll.
Does anyone knows what's the problem behind it?
try to change your browser, i use chrome and firefox in mobile mode scroll is working , and i'm try in my handphone scroll is wornking,my phone POCO X3 PRO
I am developing a static web app via React.js. I am using the google dev tool to inspect elements. In responsive design mode, everything is fine. However, when I select a specific mobile phone the footer element is not shown when I scroll to the bottom. However, it is visible on the console when ı inspect elements I can see the HTML info. I thought that maybe somehow I fixed the height for mobile devices or smt. Then I tried the firefox dev tool and I am able to see the footer. I have no idea which one is more realistic since I didn't deploy it yet. I deleted the history of browser before I tried.
More specifically; on the chrome dev tool when I select responsive design mode and change the resolution to 375x812 (same as iPhone X), I am able to see my footer. If I select iPhone x rather than responsive design mode, then I don't see it. It is more annoying that, both cases are okay for the firefox tool and I see my footer. So what is the problem ? Why two dev tools act so so differently for the same app and more importantly which one is true ?
Okay, I figured it out. There is a zoom option next to the width and height. It was 100% for my case, which should be "fit to window". I am leaving this dumb question here, it helps if any other beginner faces the same issue.
I am using Bootstrap 3 on a site and I found a weird bug that I can't figure out. It deals with the mobile menu on smaller devices. When I view the site on iOS I can see the menu icon appear, but when I click on the icon the menu does not show up. However, if I then click an area where the menu should appear, the link works and takes me to a page.
To add another variable to the problem, when I view it in chrome with the dev tools acting as iOS and the screen small, the menu shows up and works as intended. So I am at a loss how to debug the issue.
I have tried setting the z-index to 1000 with no luck. I have not been able to find documentation regarding this issue. If you have run into this issue or know where there is documentation for it I would really appreciate some help.
Here is a link to the site with the issue(on mobile devices). http://dd.cakeandeatitdesigns.com
Thank you for your time and help!
Hey in my personal experience working with that it could happened when you open your web page with safari in IOS. I don't know what are you using to show the lateral menu, but some times safari doesn't work with certain js.
I'm working with a webview this time. I've got a strange behaviour here.
The overflow-x is set to hidden, and works just fine on browsers. But when it comes to any mobile device, it doesn't respect the overflow at all.
http://www2.madeinweb.com.br/jobs/adc/prototype/html/
This is the URL of it. If you try to open the menu, it will work as intended. But I can scroll the content I placed left. That doesn't happen on browsers.
I know I can fully disable scrolling with jQuery, but I can't find a proper way to disable just horizontal scrolling.
Any tips over it?
I've managed to tweak it out with touchmove. thanks no one for the answer
We have developed a small control that is always meant to be at the bottom of the screen on out site. However when I view the site on the ipad the control does not stick to the bottom it floats in the middle.
Whats the deal with fixed position on the ipad? Is it not possible?
Does the ipad use safari mobile?
I think you should read this.
Since iOS 5.0, position:fixed is also implemented on the iPad: http://caniuse.com/css-fixed, though there are other problems, see Disable scrolling when changing focus form elements ipad web app .
Fixed header/footers for mobile devices are tricky. Using fixed positioning doesn't work as explained in the article posted to this thread by Knu.
I've found two solutions that should provide some relief. One is with jquery mobile and the other is iScroll. Both allow for fixed footer/headers.
My problem is that I'm having a hard time combing the fixed scrolling with other effects in the iPad. I hope this helps.