Huge iPhone display issue

  • I’m using the Twentyeleven theme, and it has been heavily customised to have its own custom sidebar and content sections.

    In all browsers (desktop and mobile) it looks and works as it should, apart from iPhone/iPad.

    It looks as though the ‘content’ column is being pushed below the sidebar, even though all the floats are correct and the widths are fine.

    This is an example page: https://www.bluedoveweddingsandevents.co.uk/About-Us/
    And here it is in an iPhone emulator: https://iphone4simulator.com/bluedoveweddingsandevents.co.uk/About-Us

    The weird thing is, it does this even on the home page – where there isn’t even a side bar. It’s just one single column, yet the ‘background’ white section is very thin and stuck to the left side as though it were still the sidebar.

Viewing 6 replies - 1 through 6 (of 6 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    It looks as though the ‘content’ column is being pushed below the sidebar, even though all the floats are correct and the widths are fine.

    I can’t see in the iphone simulator what you mean

    It’s just one single column, yet the ‘background’ white section is very thin

    Add this CSS to your Child Theme style sheet

    #main{
 overflow: hidden;
}

    Thread Starter nsmith1984

    (@nsmith1984)

    Sorry, the iPhone simulator isn’t perfect – in Chrome the content is where it should be but the white background is only a couple of hundred pixels wide (should be 890 to fill the box)

    But viewing the simulator in Firefox pushes the content below the left menu, whilst showing the same chopped-off background.

    On an actual iPhone, it looks more like the Firefox version.

    Adding overflow:hidden didn’t do anything unfortunately

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Add a width of 890px to #page

    Thread Starter nsmith1984

    (@nsmith1984)

    Have already tried that and still no luck, it’s really frustrating

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Have you separate stylesheets to cater for mobile and iphone platforms?

    Thread Starter nsmith1984

    (@nsmith1984)

    No, only the standard Twentyeleven css

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Huge iPhone display issue’ is closed to new replies.

Tags