Just doesn't look right on iphone, ipad

  • Hi,

    First time poster. I’ve put together a site for my business which looks fine on laptops/ desktops, not so good on the iPad and even worse on the iPhone.

    On the iPhone the content is condensed into the left hand half of the screen leaving the right hand side with nothing but the background image.

    I’m using a child theme of Twenty Eleven & the site is https://www.roymcg.com

    How can I get it to look good on the iPhone?!!!

Viewing 4 replies - 1 through 4 (of 4 total)

  • You have an inline style in the heading “Challenge Yourself and Get Fit!” that is overriding everything. I’d go to that page, and edit it using the HTML view (not visual) and see if you can find this line:
    <h1 class="entry-title" style="width: 550px;">Challenge Yourself and Get Fit!</h1>

    Remove style=”width: 550px;” or change the value to 100% instead of 550px; either solution should fix it.

    Thread Starter rwmcgreg

    (@rwmcgreg)

    I’ve made the changes you’ve pointed out plus also in the main header where I had done the same thing. It helped a bit, although still shows up as half screen on the iPhone. Screenshots before and after

    I had put the overriding width piece in so that the title would fit on one line(on the desktop) instead of wrapping into two.

    Any more ideas on how to get the page content to expand to fit the iPhone better?

    https://www.roymcg.com

    I had put the overriding width piece in so that the title would fit on one line(on the desktop) instead of wrapping into two.

    Well, there’s your problem right there… by forcing things to work on the dektop, you’re basically overriding the code that makes Twenty Eleven work so beautifully on mobile devices. To get things working on mobile (the easy way) you will need to remove all such inline declarations.

    No ideas beyond that, really. If you’re good with CSS and @media declarations, you can have your cake and eat it too. If not, you will need to choose whether you want to optimize for one device (desktop) or optimize for all devices, and accept that sometimes lines will break when you wish they didn’t, and things like that.

    Best of luck

    Thread Starter rwmcgreg

    (@rwmcgreg)

    Thanks for your help Jerry, as I mentioned I have removed the override so that Twenty Eleven can work ‘beautifully’ on mobile devices as you say.

    There are a few threads floating around where people have a similar issue, has anyone worked out how to find a fix for viewing on iphone?

    At the moment everything is collapse to the left side of the screen as you can see in this picture.

    The website is https://www.roymcg.com

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Just doesn't look right on iphone, ipad’ is closed to new replies.