When checking the homepage for https://www.warehouseappliance.com/ on my iPhone, the categories are overlapping the content above it. Yet on Android the categories are pushed down in the correct position.
This issue doesn't show using emulators, only shows when viewing on an iOS device.
Changing margins and paddings, nothing seems to effect iOS.
I'm unsure what code is causing the issue, site is https://www.warehouseappliance.com/
I expect the category section to not overlap the content on iOS. It should match Android, and the emulators.
Related
So I've been trying to learn more about responsive design. I've started playing about on my computer with a tiny project with a mobile first approach. I scaled my browser down small and styled the layout correctly. Using % for widths and REM for fonts. I thought wow this is easy
However, when I went to look at my work on an actual mobile the layout positions were fine but every feature/element on the page was showing up tiny. So the navigation menu was coming up really small compared to how it looked in my browser.
Why is this? The browser I use is chrome and the mobile android.
While testing our site on different devices we found a problem on recent Android versions. There is a bug with textures under the page, where the content ends (actually there is no any content where appears the bug). The bug appears only when the height of the page zoomed out is smaller then the screen of a device. Previous Android versions (4.1 etc) show there just white space (as Apple and Windows mobile devices also do), but 4.4 and later randomly repeats some portions of the site. We tried different viewport metatag options as well as different "height=100%" and "min-height=100%" tricks in CSS with no result. Any ideas on how we can fix it? Thanks.
Screenshot: http://i11.pixs.ru/storage/7/5/4/2jpg_2263155_16706754.jpg
I have created a fairly simple responsive website and have optimized it for mobile use using the meta tags. It works very well on desktops and on iOS phones and even the Galaxy S5. However, based on some tests using a browser compatibility program, the design falls apart on Android devices using 4.2 or lower (including the Samsung Galaxy S2 through 4, Kindle Fire 2, and Google Nexus). The images (doesn't seem to matter what type of file) will either become very vertically stretched or disappear altogether, no matter the file type. I have tried many things and can find no apparent difference between the images that are displaying and those that are not. Also, my header and footer are no longer where they are supposed to be. From what I can tell, the problem is that Android is not interpreting my css in the same way as ios does.
I have been able to fix the problem somewhat by dictating pixel dimensions for all of the photos instead of percentages, although this messes with the responsiveness of the site. This also fixes my header/footer problem although there is a very large space on the top and bottom of the mobile drop down menu and my logo in the footer (.svg) is distorted despite giving it dimensions.
I can't seem to find any information about this problem so I feel like it has to be an easy fix that I am overlooking.
The website is www.2015housingconf.com.
Thanks in advance!
I've just launched a new version of our site and I'm trying to iron out a few issues which I wasn't able to test before because I can't emulate an android phone on my localhost (I'm sure it's possible - time didn't allow the required reading)
Anyway, I tested on ie7-9, ff, opera, safari, chrome, everything you can think of an mostly everything is just fine apart from:
on android phone: I have a horizontal navigation bar between the header and the content, the last item on the menu has shifted to the next line. This could be just a pixel, but why! why! why! boohoo :(
Then on IE7, on any page which has lots of products (like this one: http://www.traditionalirishgifts.com/guinness-merchandise) the filter options and the paging navigation are meant to be on one line, like they are on every other browser.
any css genius's out there fancy helping me out?
It depends on the screen resolution of the phone. If you tried it
on a phone with a wider screen in pixels, you would have no problem.
I see one IE7 problem:
div#dropMenu no specified padding
IE7 has a default padding unlike any modern browser.
Add padding: 0 and you will have no problems.
The Android Webkit browser (tested on 2.2, 2.3, and 3.0) seems to behave in weird ways when modal elements are put one above the other. In this example here
... I'm displaying a jQuery UI date picker with z-index 200, a gray overlay div spanning the whole document height and width with z-index 199 and behind all that is the regular form.
In the example above, I have clicked on the dropdown control for the year where it says 2011. Instead of selecting that dropdown, the focus went on the textarea element way below the gray overlay.
NOTE: This doesn't happen with a desktop Firefox browser, or with the iPhone Webkit browser.
Any idea what's wrong?? Or how to work around this issue? I want to avoid modifying the form (e.g. disabling all elements, while the overlay displays)...
It seems that this is actually a known issue in Android. It's supposed to be fixed, but I can't confirm that. In any case, starring this issue would be nice, thanks!
http://code.google.com/p/android/issues/detail?id=6721
http://code.google.com/p/android/issues/detail?id=26255