I'm having an issue with a thin white border displaying at the bottom of my site just after the footer on iPhone only.
I'm using an iPhone 5 with iOS8 and I've also tested on a 4S with iOS7 and had the same issue. I've tested various Android Devices, and they are all fine.
I can't find anything in my CSS that would be causing this issue. I've tried the negative margin method but that did not work. If anyone else has run into this problem, I could really use some insight on what could be causing it. Thanks in advance for the help!
Here's the link
It might be hard to see it on a white background, but here is a screenshot.
Related
On high res screens (we're testing on 1920 x 1080) we're having an issue with uneven borders when border-width is 1px
Anything above 1px renders fine as you can see:
http://i.stack.imgur.com/19aiq.png
This is only happening on Chrome; I checked if there are any chrome settings that would fix it but no dice.
I'm currently trying to play with the html meta tags. Or maybe a setting on the computer itself is causing this?
If you've come across anything like this all help would be much appreciated!
I'm testing a demo site as of right now. I've set it up and it looks fine if I were to resize the browser, as it seems like the media queries I've set up are working properly. I noticed that on iPhone 5/5S/5C there would be some significant added height above the logo, as well as below it. I thought what would work to fix this is to add a negative margin to even out this strange space. Without the negative margin it looks like this on an iPhone 5/5S/5C:
On iPhone 6, 6+ this looks fine, as it should be. Also, on iPad it has the same strange spacing in between the logo.
With the negative margin that I added, when I would check the the site in developer tools and take it to the width of an iPhone 5 (320px), all the elements would be squished towards the top of the screen due to the negative margin like this:
If you could look at my source code at the domain http://eugeneross.com/cw and tell me what I'm doing wrong I would greatly appreciate it, I've literally been pulling my hair out over this problem as to why it's not working on certain devices.
My other problem is that the video doesn't want to play now when the display is larger than a mobile screen. I must've messed something up trying to fiddle around with my problem above. If someone could tell me the problem there I would be ver grateful.
Let me know if you need anymore from my end to assist me with this problem.
Deleted everything in
#media screen and (max-width: 320px) {}
and it looks fine to me now.
This is a good site where you can check how your site looks on all devices and some don't load the background cover.
I'm on the verge of eating my computer, bascially i'm a first year student doing HTML and CSS, just started with media queries while i've been off and am extreamly proud of my website, but when I view on the portrait mobile or ipad it loads very nicely and does exactly what I want, but you can slide slightly to the right for some reason and I don't know how to fix it! I have a small gap that I can't get rid of, why is this happening? my website is here www.webmonsters.co.uk i'm very new to this.
Thank you.
UPDATE:
So I just worked out what it was, when I scaled down the slowly in brackets with the highlighted I noticed that the elements was no scaling with the browser windown, But when I put a 90% it worked and got rid of the gap! thanks for all your help guys.
I am making a website in which everything is fine on almost all major browsers but somehow Mac Safari is showing a different css layout. like wrong background ( black-gray to white) wrong Nav-link color (white to default blue)
as I don't have Mac myself. I am not able to identify or test anything regarding this.
can you look at it & tell me if there is a solution or workaround it. Website
Thanks in advance!
Looking at it on my iMac (OSX 10.8.5, Safari 6.1.2), I see the dark gray background and white nav-link color. Here's a screenshot.
I would suggest giving an emulator like BrowserStack a try if you don't have access to a mac. (I think there's a free trial account option.) I will also parrot Lokesh's comment to (nicely) remind your client to clear his cache and try again.
Also, I did notice you have a horizontal scrollbar no matter the browser window's width. I believe it is from the width: 100%; on your footer. Try width: auto; instead.
Hope that helps. Good luck with your client!
I have discovered some problems when I run a page with dark background and image element with some white borders in IE8. The problems is that a white flicker and flash apperas in the top, middle or bottom part of the image when reloading or load another page. I have serched a lot and found a kinds of code to put inside of meta tags, but nothing works for me. Is it really that bad, that a dark background and white borders create this problems in IE and there is nothing to do? Or what could I do to get rid of this flicker and flashes?
The only thing I can think that it would be is a resurrected IE6 bug.
Have you tried fixing that and seeing if that works?