Огромный белый зазор в заголовке при похудении страницы до мобильного телефона

Question

Если вы перейдете на эту страницу (https://www.comparestonehengetours.com/) в мобильном или планшетном ПК, на логотипе будет загружено пустое место на нем. Есть ли способ удалить все пробелы, чтобы он просто отображал логотип?

Я добавил изображение, чтобы лучше объяснить, что я имею в виду.

Спасибо, Крис

Answer 1

Вы должны научиться использовать инспектировать элемент в Chrome.

Если вы делаете, вы можете использовать указатель, чтобы выбрать элемент и выследить отступы.

Вы можете увидеть, если вы сделаете первые два значения заполнения и полей 0 будет исчезнут.

Answer 2

Если переопределить эти правила настройки в отступы и запас, вы должны иметь его:

@media only screen and (max-width: 500px) and (min-width: 450px) 
#mj-header { 
    /* padding: 55px 0 0px; */ 
} 

@media screen and (max-width: 700px) 
#mj-header { 
    /* padding: 55px 0 0; */ 
    /* margin: 55px 0 0; */ 
} 

P.S. нехорошо размещать ссылки на живые сайты. Лучше попробуйте опубликовать только образец проблемы, если сможете.

Answer 3

Это из-за огромной прокладки сверху, когда экран сжимается. Его внутри CSS.

Снимите:

@media only screen and (max-width: 1000px) and (min-width: 720px) { 
    #mj-header { 
    padding: 25px 0 5px; 
    } 
} 

Или сделать это:

@media only screen and (max-width: 1000px) and (min-width: 720px) { 
    #mj-header { 
    padding: 5px 0; 
    } 
} 

с вашего CSS.

Надеюсь, это поможет!

Answer 4

быстрое решение было бы поставить медиа-запрос (в данном случае стандартный Iphone)

@media only screen 
    and (min-device-width: 320px) 
    and (max-device-width: 480px) 
    and (-webkit-min-device-pixel-ratio: 2) 
    and (orientation: portrait) { 
} 

и регулировать отступы и поля соответственно (55 пикселей добавить до 110 белого зазора до вершины.

надеюсь, что это поможет!