Почему мой заголовок слишком большой на iPad?

Question

Я только что начал блог Tumblr и работаю с одной из готовых тем (я знаю, верно...)

В любом случае, у меня есть изображение заголовка, которое выглядит хорошо на настольном компьютере / ноутбуке, и в моем аккаунте должно быть установлено, что он "покрывает" div, в котором он находится, но по какой-то причине на iPad он обрезает изображение и показывает только около 40% общая картина.

Я пытался настроить разные видовые окна и тому подобное, но я просто возвращаюсь к тому, чтобы мои руки в коде после 10-летнего перерыва, так что это немного ново для меня.

Вот этот сайт: http://goodpedagogy.tumblr.com/

В настоящее время у меня есть блок с изображением заголовка, как это:

.site-header {
    background: url({image:Header Background}) no-repeat center center {block:ifFixedHeaderBackground} fixed {block:ifFixedHeaderBackground};
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;


    background-color: {color:Header Background};
    color: {color:Header Text};
    display: table;
    height: 50%;
    {block:IndexPage}
    height: 100%;

    {block:IndexPage}
    text-align: center;
    width: 100%;
}

Опять же, я знаю достаточно о HTML/CSS, чтобы разбираться, но попробовал множество различных возможных решений с этим и чувствую, что должен быть очевидный ответ.