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.
Related
I make this webpage http://imaginary.freeasphost.net/Instruments/
Last div element has bottom border below buttons, when I open this page on computer. I have Edge, Chrome, Firefox and Opera.
When I open in on phone Xiaomi Redmi 8, bottom border is above buttons and they leak from section. I have Firefox, Chrome and Mi Browser. I checked it on other phones and internet friends checked it too, on different phones and there is same problem on all phones. Div has different heights on computer and phone.
I tried to change box-sizing, from border-box, to padding box and content-box and used moz and webkit css properties and it did not help.
Here is how it looks on computer and how I want that it looks: enter image description here
And here is how it looks like on phone: enter image description here
EDIT: Is there browser for windows that behaves like browser on phone, so that I do not have to always upload page to check how it looks like on phone? I know that chrome, firefox etc have developer tools where I can check how it will look on phone, but in this case everything looks good there, but on real phone css behaves differently.
On line 1029, change height to min-height. That should fix it
I am encountering a weird issue once again, and it again happens to be in Safari on iPhone. Safari on macOS works fine, and so do all other major browsers.
Here's the issue: Embedding a YouTube video in an iframe transforms the iframe to the left, out of the viewport. There is no transform applied to the iframe, or any parent elements. I double checked, but I am out of luck. Funnily enough, there's two quirks:
The clickable area stays non-transformed. I can interact with the content as if it was in its correct position.
Switching to the tab overview renders the video correctly.
Here's a few screenshots to demonstrate the issue:
I have also created a JSFiddle that reproduces the issue, with markup directly out of the project. Visit it on mobile Safari on iPhone or with a simulator on macOS to see the problem in action. (Use this link for fullscreen access)
Any help would be greatly appreciated.
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?
I am working on creating a parallax-ish scrolling effect for the mobile version of my site. The effect works fine on a desktop when I shrink the browser, or when I use Chrome's mobile viewer, but it doesn't work on my phone.
Here's the live example. Shrink your browser below 980px wide to see the effect. http://imbibe.staging.wpengine.com/
It appears that on mobile, the background image is shown at full size, and doesn't remain fixed.
It's just a CSS effect, no js or anything. Let me know what more details I can provide and I will! Thanks.
I've seen this question before, but the answer is evading me. There are four images on the front-page of the site http://miraishii.com. The top image, in the section displays fine, but the three within the second section don't. They are assigned images with id's gal-1, gal-2, gal-3.
The images display fine in desktop browsers, but neither iOS Safari nor iOS chrome will display the background-images. I'm using the Safari inspector to view the site, the images seem to be loading, but not displaying.
It is probably because fixed background images do not yet work in iOS yet. See How to replicate background-attachment fixed on iOS and see does a background-attachment of fixed work in iOS5?
My suggestion would be to use a media query to target mobile and do the background image in the boring way (just for smaller screens). My understanding is if you want fixed background position on mobile right now, you're going to be doing some hairy polyfills. I am sure the situation will improve over time.