This has been happening to me quite frequently and its driving me nuts. I make my website, It's completely responsive on desktop, I looked at the responsive toggle in chrome dev-tools and mozilla dev-tools. Everything is fine. I go to publish my site, everything looks good, I check the site on my phone and tablet and those are fine too. Now if my friend who has a different phone or tablet try's to access it, the images are either stretched or squeezed and do not follow the CSS properties I gave them. I have no idea why this is happening and haven't been able to find a solution yet. Any help would be greatly appreciated.
(This is not a media query issue It's mainly images getting distorted, but only on select screens)
not sure if this would help, try giving fixed width & height for small images other than header or banner images and include them in flexbox. Header or Banner images will more or less will get trimmed with respect to mobile layout.
Related
I am having a frustrating CSS problem. I am building a a single page JS map application and am trying to synchronize styles across browsers/devices. I thought I did a successful job using Responsive Design Mode in Safari/Firefox. It looks the same to me when I switch between iPad/Galaxy/iPhone/desktop in the browser emulator.
However, when I actually open the page on my phone in Firefox/Safari, it does not appear the same. Specifically, the ? button is wider than the rest of the buttons below it. I specifically have the width property explicitly set to 40 pixels in the CSS.
What is happening here? Why is the ? button wider?
Here are some screenshots of what I mean:
Desktop
Desktop/Responsive Mode iPad
Desktop/Responsive Mode iPhone
My actual iPhone
I tried connecting my phone using Remote Debug but I don't really know how to use it without visualizing the actual phone screen so I can't see what I'm editing. Anyone have any ideas?
I found the problem. For some reason, padding was being added in iPhone and not in responsive mode or other browsers. Adding padding:0 to the button fixed the problem.
I have searched a lot of answers to similar questions, but nothing has fixed my issue.
Here is the site: dev.thekarmagames.com
The width and responsiveness work fine when simulating phone and iPad screens on computer, but something goes wrong when displaying directly in mobile Safari and Chrome on iOS devices.
Here is what it looks like on iOS:
I've tried manipulating CSS, editing/removing JavaScript, and experimenting with viewport settings. Nothing seems to work.
I could really need a lead that will set me in the right direction, and I'll happily share the solution with everyone once I find it.
I am having issues trying to load my site, http://www.internhacks.io/, on any mobile browser.
The project can be found here on Github.
I have tested the site on mobile using Chrome dev tools, and everything loads fine/acts responsively.
However, when testing the site on my actual phone, sometimes the site does not load at all, sometimes only partially.
Note: the apply button is not meant to do anything yet
I think it may have to do with having a large image as the background. Should I be serving a smaller version if detecting the window is smaller? The img height is set to 100vh.
If anyone knows what might be causing this, or knows of a better way to debug the site on mobile than in Chrome dev tools, please let me know!
I use Opera mini to test mobile devices (aka android) with various screen resolutions.
"height is set to 100vh" huh? never saw that one before. To fit graphics within space available, avoid fixed sizes (aka 100px) and I use relative width:xx%
YES, it's wasteful to send large graphics to a mobile device and from the server, you need to send some xxx-low-res.img instead
it's helpful to load JS scripts into a section to allow all objects to be loaded first.
I think your main issues is that the big images should use smaller, light-weight pictures instead since it'll speed up the resize process when rendering on the phone. Other than that, you want to stick away from, as #jobeard mentioned, from using fixed sizes like the 100vh and use a relative width such as 10%.
I've been editing a site for a friend, updating it etc, I changed an old Flash script slideshow to a JS one.
It runs fine, but when loaded into an iPhone/iPod, the entire section containing the slideshow & text loads incorrectly, underneath the Left Panel, instead of next to it.
The site loads fine on several Android devices, & PC browsers.
Any ideas on what's wrong/how I can fix it?
http://www.stonehouserestaurant.com.au
Thanks, Matt.
The footer of the right side is longer on the mobile website than on the browserwebsite. That's why it's floating under the left side.
Give the html a max width:
html {max-width: 1024px;}
Though it will look like it should you still have amount of space...scroll..i think you should check your whole content to see whats happening..
I have a web app (i used JQM) currently customized to iphone.
all elements are fitted to the page height, but i'm getting a white space on the page bottom.
when viewing the page on pc browser everything is fine, so i guess the problem is related to the iphone screen resolution configuration on some CSS file.
Please view the web page on your iPhone to see the white space (scroll down):
http://aspspider.org/elimiz/check4/MC_v1.0.htm
Help me
I'm not seeing the issue on my iPhone but it sounds like a problem I had on a site.
I fixed it by setting a wrapper surrounding all the content as overflow: hidden. It might take some trial and error to find which element to put this on, and you might need to define height values on elements that dont have height explicitly stated.