I have a div with a background image that is set to be the height of the viewport (height: 100vh), with an SVG image overlayed. Everything works fine on the desktop version of Firefox (resizing windows or using the mobile preview), but it wants to render the full image length on Firefox mobile.
The page is: http://sandy.utah.gov/_Adventureweek/index.html
Everything works fine in Chrome Mobile and Opera Mobile.
Also, peculiarly, if you select text farther down the page, the page suddenly decides to redraw and renders correctly on Firefox Mobile (all on my Samsung Galaxy S6, using current versions of the respective apps).
I've been trying to figure out what's going on, but I'm at my wit's end.
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 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 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.
When i scroll right or left or up and down on mobile devices, my site seems to detach from the browser, here's a link http://www.lunacarpentry.com Not sure why?
I am having a strange problem with mobile safari. Images that are backgrounds on certain divs do not file all the way across the page, they stop just short of halfway across. They show up fine in safari on the PC and Mac.
site online here:
www.bikramyoga.cz
Tried making the tile 10px wide instead of 1px? It might be an issue with the number of repeats Mobile Safari can handle.