I hope you are all fine…
As mentioned in the subject, my site has a strange behavior on cell phones under Android Chrome Firefox and Opera.
When I use “Grid” in a “Container” set to 1200px width, with “Fill mode” set to “Fill”, the web site appears larger on Android (Not on MacOS, or iOS). So the site moves left and right and it looks odd.
When a page doesn’t use “Grid”, the issue disappears.
If I set “Grid” “Fill mode” to “Flexible width = 90%” the issues is gone.
Any idea or solution please ?
The site is http://mtx.ma
Thanks for you help
Hmmm. That sounds odd. I don’t own any Android devices so it is hard to say. I do use BrowserStack emulator for emulating Android OSes and devices. I’ve just loaded up your URL in BrowserStack using the a Samsung S9 with its Chrome browser and can’t replicate what you’re seeing.
Hello Adam, thanks for your message. Bad luck you don’t have any idea…
On top of that, the sticky navigation bar only works with Chrome on Android. With Firefox and Opera, the bar moves to the top of the screen below white bar surrounding the front camera… So at the end you can only see 40% of the menu bar…
Hmmmm, not seeing that here either in FireFox on the S9:
I’m sure it is something complicated. I mailed you the picture with the two issues:
- Web site larger than the “Container”
- “Sticky navigation” that moves to the to the top, below the white bar
Remember to get the “larger” web site issue, you need to be on a page with “Grid” set to more than 94%…
Hi again @ThunderFred – I received your email, but only with one screenshot, which I’ll post below, relating to the navigation.
If you tell me the device and version number of Android and your browser version I can try and replicate it in BrowserStack. From the looks of it though the browser itself is covering the navigation bar. I cannot replicate this with any tests I’ve done.
This is the screenshot you sent me, that I received. Placing it here for reference is all.
I’m also not seeing any other problems with your grid layout in my testing either.
Maybe I’ll be able to replicate it with your device and browser info, but I’m not sure.
Hello Adam, sorry for the lack of details. I sent you 4 other pictures with details in the name of each picture. Thanks for your help. Fred.
Got your pictures. I think you might have overlooked part of my previous post:
As for the photos you sent – I’ve tried recreating this problem but still have been unable to replicate it here. Perhaps if you can provide the information above I can narrow in on it, but as of this moment it is impossible for me to recreate.
Also, when you send me the above information can you let me know if the OS and browser are the latest versions of themselves, if you know.
So it looks like you named your image files with the device names. I was expecting you’d write them out here or in the email you sent. So no worries there.
That said I cannot test against Huawei phones as BrowserStack does not use them. The available Android devices to me are shown below. And I simply can’t buy every smartphone on the market for testing – this is why I pay to use a device/OS/browser testing service like BrowserStack.
Perhaps it is a device specific problem or conflict. I can’t say.
That said, can you send me a copy of your project file so I can look it over for anything that stands out to me?
Hello Adam, thanks for trying. I’ll leave with it. And I’ll make some more tests. Note that the browsers are all up to date of course. It is a real pleasure to work with your tools that I felt in love with… Best regards.
If you have time, send over you project file. I’d like to see what I can do.
adam at elixirgraphics dot com
Aside from your specific Android devices, are there any other instances where you notice the problem?