as Im making my new React Web App, I noticed when open on an Iphone, if the user drags horizontally it renders some blank space and makes the website functionality awfull, for androids though, this doesnt happen, do you guys have any hints?
My website URL-
https://werepairsuporte.com.pt/
PS- I dont have a SSL certificate yet as my website is not fully ready, hope you can understand that.
The problem is that one of your elements is wider than the viewport of the iphone, using the console delete elements one by one til you find the offending one then use breakpoints to amend the width.
either to just add this to your css.
body {
overflow-x: none
}
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 don't know if this is a real issue since I am seeing it mostly when using an emulator, but it seems to be reproducible, and I noticed it on a friend's Android device. URL is:
Link To Page
On some devices, particular iPad Retina emulator, when you click on the hamburger it moves the body of the page to the right as expected, but the side menu area is completely blank, despite the fact that there are elements there and you can click on them, they just are not showing up, so they are being rendered but the whole sidebar is just blank (see picture)
I did discover a useful feature on the developer menu with Safari that I was not aware of. You can go to Develop -> Simulator and use the inspector for the page that is loaded in your simulator. Quite a nice feature, but still not able to quite figure out what the issue is.
It is using a Joomla! template and looking at the source seems like it could use a lot of tweaking because there are a ton of .css and .js resources, some of which probably are not needed and some which probably conflict with one another, some which are not needed on the front end, etc.
Help appreciated.
This kind of a fix:
body.jsn-menu-mobile-push-left {
margin-left: 0px;
}
but not ideal. It shows the menu in this case but it doesn't slide out the body to the right. That is a little strange since when the margin-left is set to 0px it doesn't display.
Been using bootstrap for awhile and its now just had a small hickup.
Getting the same issue on their example. So for cleaner code ill use theirs...
http://newsapps.github.io/bootstrap/examples/navbar-fixed-top/
Win 8.1 pro
Using chrome 41.0.2272.101m (also just updated to this.. so noticed on previous version)
Disabled all extensions, also uninstalled and reinstalled, cleared cache.
Screen res: dual screen = 1920x1080 and 1680x1050
Problem: No nav bar content. Its rendered at over 7000px wide, and content is floated right or centered.
If I resize my window to say 700x400 the navbar gets a width of 2943px.
Also of note is that now the jumbotron on that page is now not display..
Its .container gets 1170px width? Reappears though when resizing.
Debugging chrome on my own site it appears that the viewport meta tag may be a cause. Removing that it performs fine, But also removing the position:fixed solves it. Though naturally leaves it with styling issues...
Using Dev tools and selecting a device works fine. No device, no menu....
Its like the viewport and media queries are not working correctly but ONLY on my PC?
I cant reproduce it on my home PC or work colleges. I cant find any info on it and for a responsive site the view-port is needed.
Driving me nuts.... quick fix, use FF but if clients get this issue or others have it?
Cant add screenshot as < 10 rep (sorry..)
For anyone interested.
After clearing the cache, uninstalling, resetting all settings and nothing working I decided to play around again in the 'device mode' pane again, as I figured this is the most likely place it'll be due to the view port meta tag seeming to affect it.
I use this pane to test sizes and resolutions and then turn it off. BUT there must be some sort of setting in that that stuck. Un-ticking everything and changing devices doesnt work..(and resetting didnt either) but you will notice a circle icon with a cross in it in the top left. Like the 'ban' symbol and hovering over it will say 'reset all overrides'. Click it..
No idea HOW an override gone in there, or why resetting the browser, uninstalling etc would not reset them.. or where you can find them, but there you go. Problem solved.
#Logan I was having the same issue. Resetting the override doesn't work for me but switching Chrome to a new user does, bizarrely.
Developers made new checkout section on our website but the pages don't size to ipad or smart phone. There are checkout buttons and important elements on the pages that need to be seen by buyers, but they are being left off (pages cut off the right third of page) --
I've been researching briefly for a quick answer -- the rest of our site uses tables and this section uses css and divs only -- is that why it doesn't do it automatically? I'm not talking about media queries -- just the full page resizing to the screen width automatically...
I don't want to use scrollbars but even that solution at this point would give a visitor the ability to actually checkout on these pages...
Can anyone help? It would be greatly appreciated.. If it is more complex, that's fine, but I suspect something can be done to make the pages fit (and zoom if need be) or (gasp) scroll..fairly easily.
Thank you in advance for your help!
Ok, that section does not allow scrolling because is disabled from the css stylesheet.
You can get back the scrolling by editing the css. Look in the css file for the styles of .section. It will have a overflow: hidden; property. (it seem that is stored on file screen.css, line 435)
Replace it with overflow: auto;
You'll then be able to do horizontal scroll. But in the end, that is not a real solution. Since it seems you are not a coder, you need to get someone to recreate the styles of your website in order to make it actually responsive.
I recommend you to use on your website bootstrap, which can be used to create a responsive navigation.
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...