I've never come across this before. I just built a single page layout website for a client. It works fine on computers, but on tablets or mobile devices it just doesn't scroll.
There are menu items which trigger some jquery and scroll down to to the appropriate content when clicked - something I use often with no problems. These work on devices, but you can't use your finger to scroll.
The site is here: http://marcdeguerre.com/
I do have my html, body and other tags set to a height of 100%, thought that might be it. So I set them all to a height of auto when the viewport is below 767px wide. To no avail.
I changed all my background-attachments from fixed to scroll at that break point too. Didn't help either.
Has anyone come across this before?
Thanks a lot for any insight you may have!
Related
I hope the title makes sense. Making an element with a set width and height, I found out that it's much smaller than I expected on mobile and also on Chrome's responsive view on the dev tools.
The reason seems to be that apparently even though a screen is supposed to be, let's say, 320px wide, the body of the webpage is over 900px wide and the width of my element gets reduced accordingly. On desktop devices that doesn't happen and it works alright.
This only happens in some webpages and I don't know the difference. What I'm making is an element that is supposed to be embedded by copy/pasting the code so I can't fix the code of the webpages, just the element itself.
What can I do and why could this be? Thanks a lot.
I've been asked to see if I can solve this issue. Another dev wrote the page, using a mishmash of percentages and px values for margins, padding, dimensions etc. These values are sprinkled both inline and in the css file. It was meant to be deployed on a set of tablets with a 1920x1080 resolution. However, the actual devices are running 1024x600. As you can guess, this has thrown everything out of whack. As of now, I'm guessing I'll be spending the next few hours changing the values to percentages. Is there any other way to do this?
To clarify, I don't need to make it responsive. This is a page that would only be viewed on a 1920x1080 screen but now will only be viewed on a 1024x600 screen.
This is a little dirty, but it will work:
html {
zoom:0.5;
}
your webpage will be zoomed to 50%. You can add media-queries so it only uses the zoom on specific screen widths
This is a very 'hacky' solution, but what finally worked was creating a new web page containing nothing but an iframe hardcoded with the original resolution settings (inline CSS height and width). The content of that iframe is the page that was to be resized. This entire thing was then imported into android studio and then exported as an apk. When that apk was installed and run, it worked. I'm not sure why, but it did work, so we left it at that.
I'm not much of a programmer, but love to figure things out for myself. But now I have stumbled upon a little bug or mistake, which I can't wrap my head around.
When viewing my new site on an iPhone or small (Safari) browser, there is some grey area on the right sight. Its so frustrating.
Hope you guys can help me..
http://fluxx.tv/v2
http://i.stack.imgur.com/V5GeT.png
its browser scrollbar it comes when the page is bigger than the screen. two options are make the content very small or add overflow: hidden to your body or the container
I have the content of my website in an absolute positioned div that fills the whole screen. The scrolling on this div is normally clunky, as it's not the native momentum scrolling. Solution? Append -webkit-overflow-scrolling: touch; to the div.
Momentum scrolling works now, but when I scroll down the page, the div elements aren't showing up. The console shows no errors, nothing is wrong with the actual page, but the individual posts (the div's) don't show. Here's an example:
Can anyone confirm this on their iPad, or suggest a fix? I'd rather not use something along the lines of Scrollability. It might be that the iOS6 beta is causing this, but I'd like to be reassured.
You can view this site on your iPad
And if anyone wants me to explain my bookmarks, I will gladly do so.
Currently .post CSS class uses position: relative. If you remove that line, the issue goes away. Apparently relatively position elements are hidden when not within the view. Not exactly sure the why the iPad does this or if it is a bug. In my experience, iPad devices try to run as efficiently as possible. For example, if you scroll JS animations are frozen. Perhaps this is a technique to make iPads render pages more efficiently. Hopefully that helps.
This article maybe be related and have a work around: CSS3 property webkit-overflow-scrolling:touch ERROR
Using '-webkit-overflow-scrolling: touch' hides content while scrolling/dragging
I have a very simple website that creates a horizontal scrollbar in the following:
Android:
Chrome
Firefox
Opera Mini
Not in Android Default browser but the site looks broken
iOS:
Safari
It's really no big deal but I'm comparing my website to the full desktop site of http://google.com and Google's website doesn't get the same problem as mine.
I am still pretty new at CSS and HTML and I feel like I'm breaking some really simple rule I don't know about that is creating this problem. Any ideas on how to fix this?
If you would like to test it. Go to http://natio.in
The horizontal scroll bar is appearing because you have fixed width's set on elements, that when the site is viewed on a mobile browser, the width of those elements is set wider than that of the viewport width. If you use a percent for widths, your webpage will be able to adjust accordingly.
well, you can include overflow-x: hidden; in the styles for your body tag, but if there is content outside the width of the phone, you wont be able to get to it. Or you could crate a responsive layout with media queries.