SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict WillisTi's Avatar
    Join Date
    Sep 2005
    Location
    Bristol, ENG
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS padding issue in iPad and iPhone

    Hello,

    Our site has a couple of small issues in iPad and iPhone. See screenshot here: http://o7.no/lWe4h6. Firstly the 'Shop By' navigation item is on the new line, we can't seem to fit it on the first line. Also the right column is not showing correctly.

    Any pointers to fix these issues would be great!

    Thanks

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,116
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Yeah, it's a bit dangerous to try to cram in links to a menu like that, as if some browser calculates all those widths a little differently, things start to drop. Same with columns.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    You could give your menu a little more breathing room via a wider site or smaller text or other. Or you could give each link a specific width via ids on each and do it pixel perfect. On the side bar it prob needs more breathing room or maybe a min width on some container. I would try first to just make it work in all with the same code. But if you cannot then use this to feed ipad and less

    @media screen and (min-device-width:320px) and (max-device-width:768px) {
    div {
    yada
    }
    }

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Assuming you haven't got a dropdown menu on the last item in that menu then the following code will give you 14 pixels extra breathing space by removing the need for padding on the last item while still keeping the item space out.

    Code:
    #nav li:last-child{
    float:none;
    text-align:center;
    zoom:1.0;
    overflow:hidden;
    }
    #nav li:last-child a{padding:0}

  5. #5
    SitePoint Addict WillisTi's Avatar
    Join Date
    Sep 2005
    Location
    Bristol, ENG
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Hi,

    Assuming you haven't got a dropdown menu on the last item in that menu then the following code will give you 14 pixels extra breathing space by removing the need for padding on the last item while still keeping the item space out.

    Code:
    #nav li:last-child{
    float:none;
    text-align:center;
    zoom:1.0;
    overflow:hidden;
    }
    #nav li:last-child a{padding:0}
    Fantastic, this worked! Thanks


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
  •