SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast kingjacob's Avatar
    Join Date
    Apr 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Site breaks down in mobile safari

    The site in question is CitizenScienceQuarterly.com and it looks good in IE, Safari, chrome and firefox at least on the Mac. But when viewed in mobile safari it doesn't resize properly.

    Here are the screenshots

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,111
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    One thing you can try is to add this to the <head> of your pages:

    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    You can also try this in your style sheet:

    Code:
    body {-webkit-text-size-adjust: none;}
    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 Member
    Join Date
    Mar 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I tried to look at your site to see what was going wrong, but you have so much going on in that WP theme, it's nuts.

    But just to let you know, it's not just a mobile Safari issue. It doesn't re-size properly on anything, my Android, or even when I shrink the browser window on the desktop.

    Your site doesn't look like it really needs that over-complicated theme, why not just make your own lightweight one?

  4. #4
    SitePoint Enthusiast kingjacob's Avatar
    Join Date
    Apr 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    One thing you can try is to add this to the <head> of your pages:

    Code:
    <meta name="viewport" content="width=device-width; initial-scale=1.0">
    You can also try this in your style sheet:

    Code:
    body {-webkit-text-size-adjust: none;}
    Thanks for the suggestions Ralph.m, I was already implementing the first option and the second had no effect.

    @conqueror: What browser/os are you using to get the error on your desktop? Is there anything specific about the site that's overcomplicated or are you referring to the breadth of the css?

  5. #5
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Chrome and Firefox on Ubuntu. Shrinking the browser window, some things get re-sized, others don't. Some elements get overlayed on top of others, like the sidebar obscuring the post titles. On my Android, it looks just like your screenshot.

    Your site isn't over-complicated, just that the WP theme you are using is, IMO. It looks like way overkill for what you need. It seems your site could be done with a more lightweight (and easier to troubleshoot) theme, that's all.


Tags for this Thread

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
  •