I'm losing my mind over this. The iPhone is screwing up the CSS in the mobile menu on this website:
http://www.kinderlogopediemaassluis.nl
The problem is with the green SVG background under the hamburger icon.
In all the emulators that I am testing, it shows up correctly:
http://www.responsinator.com/?url=www.kinderlogopediemaassluis.nl
But for some reason on an actual physical iPhone, this happens:
Can anyone find the problem?
Related
I have a problem with one of my projects where I use TailwindCSS.
The page looks all right on Desktop, Tablet and some phones, but for some of them, the website has a horizontal scrollbar.
This problem is only happening on Google Chrome on iOS (iPhone 11 Pro).
On iPhone 5 everything looks fine; no horizontal scrollbar.
On Safari the website looks alright on all devices (mobile, tablet,
desktop).
I've done something wrong, because I can't figure out what's happened.
The problem can be found here
P.S.: I added overflow-x-hidden on body to prevent the scrollbar, but didn't work.
Thank you!
Ok, so i found the problem, is realated to aos.js library that i have loaded for animation on div's elements. On mobile the library creates a "side space", after i deleted the animation, everything looks ok.
Thank you!
I have a custom checkbox and a weird border appears around my checkbox SVGs. On the website web app, tablet, and Andriod devices it doesn't appear. Only on IOS, Has anyone come across this before and know of a fix. I have spend days looking for a fix, doing CSS hacks, googling and working with other dev's on the team and trying to find a way to inspect on mobile, but to my knowledge, not a possible thing to do on a mobile browser. Attached is the image.
I can't click on any building pictures links (at the very bottom of the homepage) when going on mobile a this project whatever safari, chrome or firefox (while it's working well on desktop) :
here is the concerned building pictures links
Do you have any ideas of how I can fix that ?
Thanks for your help !
I can click them on an iPhone 8 with Chrome Browser.
But i can only click them outside of the colored border. So the colored border is above the image which contains the link.
Check the z-index property and the media queries. You will see, that the border is above the image on mobile devices and below the image on desktop screens.
I am trying to make my mobile site accessible to as many browsers as possible, and I noticed when using the opera mini simulator (http://www.opera.com/mobile/demo/) that it doesn't support css background position - which I'm using to display a sprite for all of my site images. Are there any workarounds for this?
There has to be something else that keeps your code from working, because Opera Mini 6 does actually support background position.
Th website of the company that I am working for uses background position in some places, for example to change the color of the active menu button, and that works just fine. On the other hand there is some other rendering problem that makes it only show part of the button, but that part is the right color...
I have a glaring CSS problem with my website on iphone even though it looks just fine in safari for mac and safari for ipad.
In the attached screens, notice the white background in the upper right corner is only present on the iphone (and it's not supposed to look that way).
What tools and or techniques would you use to try and isolate the cause of this rendering problem?
Here's the iPad version that's OK.
Here's the iPhone rendering of the same page with the extraneous white area in the upper right.
And for easy clicking.. the site is http://summertown.org/
tia!
-Darrell
My problem is solved. One of my super smart co-workers took pity on me and gave me the CSS fix. I'm not any smarter on HOW he figured this out... he said it was a trade secret.
Anyway, the solution was to add...
“min-width: 57.69em;”
to body css (summertown.css)