I am at a loss with why one page on a site that just went live is misbehaving on iPhone (and possibly others at 320 to 480 px wide.
I have used various simulators that have never let me down before (screenfly & iphone5 simulator) plus I have tested the responsiveness using browser resize and for some reason none of these methods can replicate the issue so I cannot find a way to correct the problem. I have cleared my cache and tried from a different phone.
The Problem:
Visit (site removed) from a phone and notice that this is the only page on the website that does not fill the devices screen. Visit any other page and you will see that the rest all fill the page normally.
If someone can point me in a direction to reproduce the problem (not on a phone) where I can access developer tools I should be able to correct the problem on my own.
I have tried reviewing my code to see what is different about that page in comparison to every other page and cannot find what appears to be causing the problem.
Some help would be gratefully appreciated.
Thank you in advance.
In Google Chrome on Phone it's ok!
Check your settings about responsive and specific browsers settings in CSS..
Good Luck, please give photo from Phone.
Okay, I found the issue. Was able to find a div element with in the contact form that had a fixed width and although the content within the form was properly set the div was pushing the entire page over.
Related
I'm working on a Wordpress theme over at http://mbgb.co.uk/blog
Up in-till an hour ago all was OK, now however whenever accessing the site with mobile dimensions, the previous CSS has disappeared. I've tried going back to previous CSS but that's not working and to my knowledge I've not touched any other part of the build.
Any advice?
Thanks in advance.
I have checked the url you mentioned.
Found some weird tags.
Please open your website and view your page source(Ctrl + U).
Preferably in Mozilla Firfox. As there the errors will be highlighted.
Please see the attached screenshots.
Go through the page source and resolve the things that are making these occur.
Please check
Please check
Did you checked if there are css rules that make your CSS appear only for desktop screens? This could be only explainable reason.
I'd just left a tag out - one day I'll learn not to panic. Sorry guys.
I am supporting a website:
https://www.allcounted.com/
If you first look at the home page or What's Hot page and then click the Subject or Country page in the top navigation, you would see the page move left a little.
I know this is a CSS issue, but I am unable to find out the CSS rules that creates this issue. This website uses bootstrap-3.2.0 and some other tools.
At my screen this page seems displaying correctly (Chrome 57). This 'movement' what are you talking about's occurring because of browser is scrollbar, I guess, if I m wrong, punish me, but also I may recommend you using Developer Tools at your browser to inspect that. :)
If you could share more info I will be glad. (Some screens etc.)
I am experiencing the following (strange) bug:
When my site is seen on iPhone 4 (haven't tested on 5), an extra "Search web" bar appears when scrolling up and down. It slows down the browsing dramatically. It happens on both Safari and Chrome. It doesn't happen on other sites on the same device (so it is not a problem with the phone itself or its browse).
I cannot find any similar reports on the internet.
Has anybody seen something like this?
Could you have a look at my site www.justrunlah.com and check if something is wrong?
Can you even reproduce it?
Screenshot:
thanks a lot in advance
Try hiding the search bar within your website (header-search) and see if the problem still exists (just to test to see if its your own searchbar that's causing the problem).
It was some sneaky code added by a plug-in.
More specifically: Sweet Captcha used a code connected to Errnio to monetize
I removed the plug in and it's gone
Read more: https://wordpress.org/support/topic/hidden-search-bar-features?replies=3
I'm using a Google maps iframe to display the location of my customer on his webpage. Works fine, but when viewed on Ipad the Google server apparently sends a different version of the maps. It looks like this:
Now, that wouldn't be a problem, but the two buttons on the bottom (i marked them in red), which I'm assuming are supposed to allow routing or something, don't do anything when being clicked?!
Has anyone an idea what my problem here might be? And how I either get those buttons to work (preferred solution) or else get them to disappear?
You can get rid of them by reducing size (height) of your iFrame and adding overflow:hidden style.
They don't work for me either. I seen this bug. But it's not the first time Google screws something on mobile devices (Google News for example somehow thinks my PC is a Tablet), so I wouldn't worry about that too much. Eventually hopefully they'll figure it out.
I have built a website(asp.net): http://avior-ins.co.il/
I can view the site on my computer(I have checked Firefox, safari, chrome and explorer and everything's OK), but the customer says that the CSS seems to be defective when he use iPad.
I don't own an iPad/iPhone, but I don't see any problem when I use my android phone(Motorola droid razr). I have also checked the site http://ipadpeek.com/, which is supposed to be a kind of iPad emulator and I don't see any problem.
Will you please check the site from Ipad and tell me what can cause the bug?
Thanks from advance!
In case you run into too much trouble developing a one-size-fits-all web page, you can have an ipad version of the page and then use detect/redirect strategy.
http://davidwalsh.name/detect-ipad
This fellow has a few nice approaches to that already worked-out.
Thank you all for the help. The real problem was an tag with text-indent -9999px.
It was placed on the site's menu and when I removed it, I looked ok.