Responsive design advice

HTML & CSS
1

OK this is my first shot at a responsive design so I thought I use a template to get the hang of things and how they worked - which I thought I had done because everything was going fine and displaying on my ipad so I thought I was almost there with it until I tried the site on a friends ipad2 and all the forms were out of whack and the pages were able to be moved from side to side which they snapped nicely in place on my ipad. This also occurs on the iphone too. Its just funny that everything without a form on is perfect in that respect but as soon as there is a form on there thats what knocks it out.

This is the design Im working on its nowhere near the finished article as I started from scratch again using the template but you can see what I mean about the form issue. http://www.gibsonpixeldev.com/r2/vehicle-enquiry.html

Now initially I had the form to the right of the text and it sat nicely next to it on the ipad but on the ipad 2 it wont have any of it and even as it is now the iphone doesnt like it either. Ive been pulling my hair out for two days over this trying to figure it out. Like i say everything fit nicely until I tested the pages and only the ones that included a form caused me hassle.

Thanks in advance I hope some bright spak can shine some light on this.

R

2

What happens if you change this

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

to this?

<meta name="viewport" content="width=device-width">
3

Hi That works great the only problem is is that it knocks the display of some of the text out when the ipad is flipped vertical if you get me - is this because % hasnt been used for the font sizes? I just cant understand why its only the pages with forms on that get knocked out of whack.

Thanks
R

4

Hm, not sure, but these devices can sometimes decide to alter the font size by themselves. Try adding this to your @media rules and see if it helps:

body {-webkit-text-size-adjust: none;}

(You can just add it to your regular styles, but I prefer not to, as it then affects your desktop browsers, too—though not in a major way. It just means that users might have trouble bumping up the font size of your page if they want to, which isn’t nice, even though most people may not do that anyway.)

5

hmm didnt seem to make any different with the font size - I did put it in the right place didnt I here -

/*----- 3.1 Mobile (Portrait) / Design for a width of 320px -----*/
/*----------------------------------------*/

@media only screen and (max-width: 767px) {
body {
 padding: 0;
 -webkit-text-size-adjust: none;
}

Thanks

6

Whats also baffling me is the way this issue only arises with the pages with forms on.