Am stumped! Have just found a very weird anomaly when viewing with an iPad. My forms work fine on a desktop computer and on the iPad in landscape mode but when in portrait mode the fields and buttons cannot be selected.
This form will not work in portrait mode:
http://www.alpinenurseries.com.au/trade-applications/
But this one will:
http://www.alpinenurseries.com.au/jobs/production-manager/
Have no idea what might be causing this!!
Any help sorting this out most appreciated.
R
Try adding clear:both to #services-widget, it makes the element drop below floated elements.
Related
I've built my website using Bootstrap 4. There were some issues with the responsive design so I used media queries to fix those issues. The whole time I'm using Chrome's device toolbar to make the changes to the CSS. While using the device toolbar everything looks as I want it to but when I resize the browser outside of the device toolbar the media queries no longer work. I've tried this in both Chrome and Firefox.
I've prematurely made my site live to see if the issue would still persists when live and the issue is still there. Has anyone encountered this before?
Lakhan Production is the URL. I would greatly appreciate any feedback and insight. Thank you in advance.
In your media queries, you used min-device-width and max-device-width: The device width measures the device (phone, tablet etc.), not the browser window. That's the reason for what you describe. The mobile developer mode of Chrome apparently also emulates the devices that way.
I would rather use min-width and max-width instead of min-device-width and max-device-width
I hope it's ok to share URL: http://www.amigote.com/user/marcus_avrelius
The header image gets resized on PC browsers but for some reason doesn't work on cell phones, shows way too high! I am not sure why please help me to find it issue?
Update! It's not working on default browser? How can I take care of that? I installed firefox app and it works!
Use 100% width so it will automatic re-sized according to browser width.
OR
You can use media query for same.
I am about to launch a new Joomla site, and the only minor bug holding me up (not really effecting launch, just annoying) is this strange issue with iPhone (using Safari Mobile). You can see it in the image attached or use http://synthphone.com/ to see it.
Any ideas? I haven't noticed any other issue on any other browser or device. Link to the page is http://www.complisolutions.com/services.
Thanks for any assistance!
It's most likely a font size issue - note the word 'environmental' - looks to me like that cannot fit in the space allocated between the image and the left side of the screen.
Try remove that word to see if this is the case.
What you'll want to do, is use media queries to firstly make that image full page width at small screen resolutions and secondly to remove the float.
I'm currently starting to use a responsive approach to my sites. I've found http://fluidbaselinegrid.com/ to be the best boilerplate for this. But with every boilerplate or grid I've tried I can't get an iPhone or iPad to recognize the media queries when you switch from portrait to landscape mode.
It always loads the correct css in the orientation that you load the page in. But when you go from portrait to landscape it hangs and doesn't resize properly.
You can even see this happening on http://fluidbaselinegrid.com/.
Does anyone know if this is a quirk with mobile webkit that we have to live with for now, or is there a way to fix this?
I contacted the developer behind Fluid Baseline Grid and got this answer:
I think what you are experiencing is the viewport meta tag.
Current:
Maximum-scale doesn't allow the user to zoom in/out with finger pinch.
However, it prevents the layout shifting when a device is changed from
portrait to landscape. This was purposely removed to help those who
may have impairment reading smaller text. You can can simply change
the meta tag in the head to set the scale, which will fix the zooming
issue when you rotate from portrait to landscape.
"If web developers want their scale settings to remain consistent when
switching orientations on the iPhone, they must add a maximum-scale
value to prevent this zooming, which has the sometimes-unwanted side
effect of preventing users from zooming in"
- http://hacks.mozilla.org/2010/05/upcoming-changes-to-the-viewport-meta-tag-for-firefox-mobile/
That definitely fixes the issue, but it seems that you can't have the ability to zoom with a finger pinch and also control the way the layouts switch. Is there a way to work around this?
I solved adding 'initial-scale=1' only (and not 'maximum-scale=1') to the viewport meta tag
How to test website compatibility for iPAD without having iPAD , in both condition Portrait and landscape?
on Windows PC
also, there is another web-site: http://ipadpeek.com/
but, if you have a special css file for ipad, this site cannot show it. you should change your main css file with ipad specific one...
also, you can rotate your ipad in ipadpeek.com
edit: there is an app for looking your layout on ios device here.
You'll probably have to use a windows browser to fake the browser-agent header. This page gives more information as well as the browser agent string.
You could use Chris Pederick's User Agent Switcher in Firefox, but you won't get webkit rendering. The best option is probably to use the developer tools in Safari and change the browser agent in the Develop menu.
You should also make sure your screen size matches the iPad (1024x768 if I'm not mistaken). To test landscape, just change the screen size.
What you won't get is multitouch and gesture testing...
What are you actually trying to test? If it's just a website, that should be sufficient.