Im makin' a mobile website for a friend - and im using media queries to adjust her website for a more mobile feeling when watching it on any smartphone.
Feels like im done with the webpage - but when i view it on my phones iphone 3gs and htc incredbile S its like that you can scroll 2-3 pixels horizontally.
Some element is messing with this and im growing gray hair since i can't really find out which it is.
how do i solve this?
webpage link
http://www.linaahlen.se/
Had a quick look with the inspector in Chrome and it looks like it's this property:
div.entry {
padding: 0em 1em;
}
Line 106 of style-responsive.css - it's pushing the content just a few pixels wide, changing it to be padding: 0 0.8em; worked for me.
Oh, and just for the record, it's scrolling horizontally, not vertically!
Late, but for future reference.
I would like to point out the way to go searching the cause for the problem.
Open the site using Google Chrome Device Mode. Then check to see that the problem exists there (this solution relies on the problem to show up in the Device mode). Then start setting "display: none" to the elements one by one starting from larger elements like header, content container and check after hiding each element if the unwanted scrollability has dissapeared. This way you can track down the cause of the problem.
I had the same problem and tried to identify the cause at first by looking at the CSS code of every single element, wasted a lot of time and didn't find the cause. Probably a browser can render a page better that a human reading CSS...
Related
Unable to fix error Google Mobile Usability > Content wider than screen in Google Search Console. I have try chrome mobile layout emulator from DevTools, set width to 320px but no horizontal scroll appears. So, all looks fine in emulator but google raises error. Then, I have add to css:
#media screen {
html, body {
width: 100%;
overflow-x: hidden;
}...
But no effect, error still persist.
Test Live URL tool don't show any error, all pages mobile friendly.
Any idea how to fix this? I'm sure this is google bug, but how to avoid it?
I have remove all "position: absolute" from classes, doesn't matter if absolute element fits on small screen fine. But that classes were assigned to hidden content what fit fine on smallest smartphone screen, also most of them were not connected to any page element, because elements were password protected.
I found a way to quicker render pages, not waiting long time after clicking "request indexing". First create new page, using site template and css, text on page should be unique(Lorem Ipsum Generator help with that). Second, create one more sitemap file with only one url pointing to new file, submit it and in a 5 minutes you'll have crawled and indexed page. That helps a lot while searching a bug in template or css.
Edit:
Since removing absolute position broke UI design, I set it back with javascript.
Check in real devices instead of emulator. Delete every section and check iteratively, you will understand which one is causing horizontal scroll
I apologize ahead of time, I am not a skilled web designer at all, and I did do some googling before asking this, but it was complicated as most solutions require creating new divs and stuff, I was hoping there is a simple mod or line I could just add to the existing code for the footer to solve this?
Here is the site: http://ratecitident.com/ See how the black footer is overlapping the ratings box, how can I prevent this, to keep the footer at the base on any size screen? it may not show the problem on your screen, but it does on certain sizes, and on phones.
This is how it looks like on my desktop screen: http://gyazo.com/112b627bb056fc0bc6eb48070939d9b7
Thanks
You can simply add this little bit of code to your CSS:
div#content {
margin-bottom: 20px;
}
This is gonna give you more spacing,because you are forcing the footer to bottom of the content div to 20px.
You can always,target a specific screen using media queries,in this case you must target the iPhone screen,here is some good tutorials about the media queries.
css-tricks.com's tutorial
mozilla developer network's tutorial
I've more or less finished a simple bootstrap site for a client, however I ran into an issue where the body element seems to have an extra 160px on the right side! I've spent like 3 hours already trying to find an answer.
To partially solve this problem I added the below css to the head:
html, body { overflow-x: hidden;}
This got rid of the extra 160px however on mobile devices (only tested iOS) the scrolling action is now incredibly sticky - rather than the fluid scroll we expect on a mobile device. Instead of one fast flick of the finger making the page continue scrolling, now when the finger leaves the screen the page stops dead.
In terms of user experience this isn't really acceptable and has been a real pain to try and solve.
I've put the site here for you to try on a mobile to feel the 'stickyness' goo.gl/yEI3rn
On desktop you can use inspector to disable the overflow-x:hidden; on the body to see the extra pixels on the right.
If anyone can investigate the site and tell me any one of the following it would be very useful:
Which element in the body is causing the body to have the extra width?
Why the body element has the excess width?
Is there an alternative to overflow-x that will not create mobile scrolling issues?
Any other areas to investigate to try and solve this issue?
Thanks so much for any insight here!
you can try adding this to your css to see which element goes all the way:
* {
outline: 1px solid right;
}
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've got a one page site that I'm building for myself and I've got a small but annoying (to me) bug.
I'm working on making it media query friendly, and so far what I'm learning is coming together ok. What's bugging me is that when the site is being resized horizontally, there's a part where the horizontal scroll bar flashes up.
You can see where in the screenshot. It's around the width of 767px.
I think it might be coming from the 1140.css file, the framework I'm using to make it responsive, but I can't figure out what's causing it or how to fix it.
You can check my site out:
http://vitaliyg.com
From giving it a blast in Chrome it looks like it is due to
media="screen" 1140.css:10
.container {
padding-left: 20px;
padding-right: 20px;
}
If these are both turned off the scroll bar doesn't appear.. for me at least.