htmlcsslandscape

Black block appears when mobile rotates to landscape

When viewing this site on my iPhone 4, everything looks how it should in portrait layout. When rotated to view in landscape layout, there is one div that is responsible for creating a black block in the middle of the screen (below).

CSS is pretty basic

width: 100%;
img {
    margin-top: 50px;
    max-width: 100%;
}

Any suggestions?

Thanks in advance

Solution

  • Easy fix. My images were not resizing.

    img { height: auto; max-width: 100%; }

    Appreciate the feedback!