SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Michigan
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Bootstrap site: Logo Trouble on Mobile Devices

    Hello all,

    I'm having some issues getting a logo to appear correctly on mobile devices. It looks great in all browsers i've tested even with the viewport set small, but on both android and iOS the logo is being cut off. Can anyone see what i'm missing that would cause this?

    link: cust2.mainstreetinc.us

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,319
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    Not sure if this will help, but it's worth adding this to your styles to see if it makes a difference:

    Code:
    @media only screen and (min-width : 320px) and (max-width : 480px) {
    	body {-webkit-text-size-adjust: none;}
    }

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

    I don't have an iphone to test (only the emulator) but it looks like the inline height you have in the anchor inside the h1 is not being applied.

    Code:
    <a class="brand" style="background: url('/templates/strapped/images/logo.png') no-repeat; width:327px; height:95px;" href="/"> Helps On The Way</a>
    Try giving the height in the css in the media query for that log at the small width and see if it makes a difference. There's too much code for me to build a local demo to test I'm afraid.

    e.g.
    Code:
    .brand{height:95px}
    I don't know if it will make any difference but worth a try.

    Edit:


    Ralph's post also reminded me that webkit has a problem with scaling background images so you could also try -webkit-background-size:100%; in that inline style.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Michigan
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks both of you. I'll try each of these and report back.

    thanks again!

  5. #5
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Michigan
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Ralph.m - i added that to my CSS but will have to try it out on my emulator when i get back to the office on monday.

    @PAul O'B - i'll have to wait to apply your suggestions till i'm back monday too. I see your point thought... thanks for the input!

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Michigan
    Posts
    70
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    adding teh height to the css worked great. Thanks guys


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
  •