Page displaying incorrectly on iPad/iOS

Hi there,

I know this is not specific to a plugin, but wondered if anyone in our community could shed any light an something?

The site at http://www.bloodredink.com displays great across the board except on the iOS devices, where it looks like elements are overhanging on the right hand side…scroll down the page and look the the sidebar to see what I mean.

I’m guessing this is a problem with my CSS, but can’t get my head around it.

Any help would be very greatly appreciated.

many thanks,

Ab

  • DavidM
    • DEV MAN’s Mascot

    Hi Ab,

    I’m one of the unfortunate few not to have an iOS device so I’ll mention this thread to a couple other guys who might be able to see something there.

    Meanwhile, perhaps others around here might already know a quick css fix. :slight_smile:

    Cheers,

    David

  • Tammie
    • WordPress Wizard

    If you want it to be true to the device then Mason is 100% correct you’d want to ground up do a responsive design using the meta call viewport.

    However, that’s not something to take lightly. It’s either something you have to do with a theme that specifically does it or customise. I won’t lie it’s a bit of a steep learning curve even for a theme designer to take the leap into responsive.

    That said we do offer a responsive theme but it is a simplier theme in style: Simplemarket – whilst this has functionality in it for MarketPress it works well without.

    Another alternative is if you are using BuddyPress (not sure if you are) you could go the plugin route and using something like BuddyPress mobile.

    http://buddypress.org/community/groups/buddypress-mobile/

    Personally I side with responsive designs not with plugins but many find this their chosen alternative too. It’s a matter of what works for your community really.

    All this said though the theme you are using should work out of the box without the viewport and just like any other browser – if it’s not then yes you should be fixing it to make sure it does. It wouldn’t be natively fitting the page but it should work in the browser like any page.

    As to what could be the issue my thoughts are the following:

    1. Overlaps as in divs being too large

    2. A responsive design being half applied

    3. CSS that forces a particular width

    4. A missing closing div

    I’d recommend if you can contacting the theme designer – not sure it’s one of ours please let us know if it is. I assume it’s not or heavily modified?

  • Abaloo
    • The Incredible Code Injector

    Hi thanks for the helpful response.

    I am the theme designer, it’s one of my own, and I just cannot see the error in the code at all. It’s driving me absolutely crazy.

    I know that i really need to be going more responsive, but in this case it’s just not going to happen because of time limitations.

    I think one of your four suggestions is almost certainly correct, but I’m just not seeing it in my code :slight_frown:

    ab

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.