Мой сайт www.rosstheexplorer.com.
Следующий код в моем header.php
<img class="header-img" src="http://img.ruphp.com/header/Cover-Photo-6-2.jpg"> <img class="mobile-header-img" src="http://img.ruphp.com/header/Cover-Photo-Mobile-Test.jpg"> Следующий код находится в дополнительном CSS
@media screen and (min-width: 660px) { .mobile-header-img { display: none; } } @media screen and (max-width: 660px) { .header-img { display: none; } }
При просмотре сайта на рабочих столах обычно обычно пробегает над заголовком. Похоже, что белое пространство остается, даже когда мобильное изображение не появляется.
Как я могу гарантировать, что между заголовком и верхней частью страницы никогда не будет никакого разрыва.
спасибо
В custom-css имеется следующий медиа-запрос:
@media screen and (min-width: 75em) { .site { max-width: 1153px; margin: 400px auto; padding: 54px 108px; } }
400px отвечают за то, что ваше изображение заголовка нажато так далеко вниз по странице. Просто удалите это, чтобы заголовок находился в верхней части страницы.
Кроме того, вы можете использовать сокращенный запас margin: 0 auto 400px; если вы хотите сохранить маржу внизу, но снимите маркер сверху.
Обратите внимание, что у вас также есть прокладка 54px . Если вы хотите, чтобы он смылся с верхней частью страницы, вы также можете удалить прокладку или использовать padding: 0 108px 54px; чтобы проложить нижнюю часть.
Надеюсь это поможет! 🙂
В вашем .site есть маржа. Также кажется, что стили тезисов дублируются в разных файлах вашего CSS ( style.css и « style.css ? custom-css )).
Измените свой CSS, и он должен быть таким, как ожидалось:
@media screen and (min-width: 75em) { .site { max-width: 1153px; margin: 0 auto; /* change to this value or remove this line, it's already inherited from style.css:967 */ padding: 54px 108px; } }
Спасибо вам за ваши предложения.
В дополнительном CSS я
@media screen and (min-width: 75em) { .site { max-width: 1153px; margin: 400px auto; padding: 54px 108px; } }
Теперь я изменил его на
@media screen and (min-width: 75em) { .site { max-width: 1153px; margin: -50px auto; padding: 54px 108px; } }