I almost finished designing a new website. The site looks good on Desktop, iPad (portrait and landscape) but was cropping off the right side of some of the headings on iphone. I added
body {
overflow-x:hidden;
min-width:360px; }
This fixed the headings from cropping - but the site still opens on iphone at 320px width and you have to pinch to zoom out to see the part that is cropped off the right hand side.
The problem can be demonstrated on a desktop browser also by re-sizing the window. The responsive content of the page scales down and then suddenly stops scaling at the last minute and instead crops of the right edge of the page.
I also have viewport set as follows: <meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0;"/>
Not sure what other code would be useful. Here is the link to the site as is: link to site removed
I think the problem is I a have a large 100px heading font that can just fit into 360px width but becomes cropped at 320px. I tried using vw to scale the headings - this works, but i prefer the look of the bigger font on the smaller screen more then a scaled font. Is there a way to force the iphone to open the page with a 360px width instead of 320px?
I have only two ideas to fix that..
first, try to make some headers smaller..
second(main), I thing that You haven't got responsive images, but I don't know, try: img {max-width: 90%; height: auto;}, that should work. :)