CODEWITHSUNDEEP
htmliosiphonecss
Mike B
Mike B

Reputation: 2776

CSS weirdly breaks on some iPhones

Main idea

I have a web page with custom css files for different screens. After a lot of searching and using responsive simulator testers that show no errors, some iPhone users complain about broken page style.

Code basics

Page has 2 custom CSS files for larger (>960px) and smaller(<=960px) screens.

I have this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

This is my page to test

Test and results

On browser testing for smaller screens (even down to 260px width) show no problems. Also validated the CSS here.

This is how it looks for some people with new updated iPhone 6 browsers (Safari and Chrome have the same result).

All the other phones (as far as I know) don't have this issue.

enter image description here

Upvotes: 1

Views: 1972

Answers (4)

klumme
klumme

Reputation: 608

Relating to what others said about the 150 % width: there is some JavaScript setting that width in js_compressed.js... it's compressed so it's difficult to tell what the point of it is, but here's what it looks like pretty-printed in Chrome Devtools:

b() && ($("section.top").css("width", "150%"),
$("footer").css("width", "150%"));

Right below it there is some stuff related to FancyBox (this, I presume)... maybe could be related to that?

Upvotes: 3

Andrew Ice
Andrew Ice

Reputation: 841

Your header (and possibly footer) are set to a width of 150%? That's what's breaking your page... It's creating a wider section, and therefore breaking the main section of your site.

Try removing the hard width of 150%; max-width should never be more than 100%.

Upvotes: 2

vineet gupta
vineet gupta

Reputation: 9

Please try 

#top_block_wrapper, #secondary_block{
    display: block;
}

Instead of display: table-cell

Upvotes: 1

Mr. Pyramid
Mr. Pyramid

Reputation: 3935

Since I don't have specific code snippet to detect your problem thus It's tough to identify which part of your code creating this issue so I am not able to answer your question specifically also I haven't got this thing on my devices but I have something for you that you might need to look

Check out this SO post check out the first answer specifically it has all the hacks that you need to know for iOS safari browser. With this I hope that my try will do the trick for you :)

Upvotes: 1

Related Questions