SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    responsive design advice

    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. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    What happens if you change this

    Code:
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    to this?

    Code:
    <meta name="viewport" content="width=device-width">

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,214
    Mentioned
    457 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    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. #5
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmm didnt seem to make any different with the font size - I did put it in the right place didnt I here -

    Code:
    /*----- 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. #6
    SitePoint Enthusiast
    Join Date
    Nov 2005
    Location
    Manc, UK
    Posts
    72
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whats also baffling me is the way this issue only arises with the pages with forms on.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •