Почему в мобильной версии моей страницы есть свободное место? - PullRequest
Новая
       20

Почему в мобильной версии моей страницы есть свободное место?

0 голосов
/ 07 января 2020

Я пытаюсь сделать так, чтобы поля моего настольного сайта go исчезли, когда область просмотра переключается на мобильное устройство. Пока что мой медиа-запрос выглядит так:
@media screen and (max-width: 500px) { body { margin: 0; } .header { width: 100%; } } Я использую LESS, если это имеет значение.

Редактирование: Код заголовка выглядит следующим образом: 

    .header {
    background-color: @dark-red;
    display: flex;
    flex-direction: column;
    margin-left: 20%;
    margin-right: 20%;
    padding-top: 2%;
    padding-bottom: 2%;

    .logo {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    h2 {
        display: flex;
        color: @offwhite;
        justify-content: center;
        font-family: 'Kulim Park', sans-serif;
        font-size: 1.8rem;
    }
}

Ответы [ 2 ]

0 голосов
/ 11 января 2020

У вас есть margin-left: 20%; и margin-right: 20%; в главном CSS для вашего .header элемента, который также действителен для мобильных устройств с шириной <500px, если вы не добавляете другие настройки полей для <code>.header в Медиа-запрос для устройств с шириной менее 500 пикселей. Таким образом, это создаст 20% ширины справа и слева в секции header для всех размеров.

Чтобы избежать этого, в ваш медиа-запрос @media screen and (max-width: 500px) {... вы должны добавить следующее: 

   .header {
     margin-left: 0;
     margin-right: 0;
   }
0 голосов
/ 11 января 2020

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

См. Несколько последних строк CSS ниже.

Пример в реальном времени: https://codepen.io/panchroma/pen/BayxRLm

CSS 

.header {
    background-color: red;
    display: flex;
    flex-direction: column;
    margin-left: 20%;
    margin-right: 20%;
    padding-top: 2%;
    padding-bottom: 2%;
}

    .header .logo {
        display: flex;
        justify-content: center;
        width: 100%;
    }

.header h2 {
        display: flex;
        color: white;
        justify-content: center;
        font-family: 'Kulim Park', sans-serif;
        font-size: 1.8rem;
    }


@media screen and (max-width: 500px) {
    body {
    margin: 0;
    }
    .header {
    width: 100%;
    }

    .header,
    .logo,
    h2{
     margin:0;  /* new */
    padding:0;  /* new */
  }
}

Удачи!

...