проблема с адаптивным заполнением панели навигации css

#html #css

#HTML #css

Вопрос:

У меня на панели навигации все выглядит великолепно, пока не станет отзывчивым. в нижнем выпадающем списке по всему периметру есть пробел в 5 пикселей.

https://jsfiddle.net/nc2hamed/5/

я пробовал добавлять и удалять отступы на

 .expand {
    max-height: 40em;   
}
  

Ответ №1:

Верхний пробел связан с тем, что в вашем .menu есть большой padding-top. Пробелы слева и справа есть, потому что ваш.ширина переноса: 95% (не 100%). Итак, этот код исправит обе проблемы:

 .navbar {
    width: 105%;
    margin: 0 -2.5%;
}
@media only screen and (min-width: 800px) {
    .navbar {
        width: auto;
        margin: 0;
    }
    .navbar .menu {
        padding-top: 20px;
    }
}
  

Ответ №2:

Ваша проблема в вашем .navbar .menu элементе. Вам нужно установить значение padding-top to 0px , если высота вашего экрана не является мобильной.

Ответ №3:

Вы должны удалить некоторые padding-top .navbar .menu из них и установить max-width значение 100%

 @media(your_media_query) {
   .navbar .menu {
     padding-top: 25px;
   }

   .wrap {
      width: 100%;
      max-width: 100%;
   }
}
  

Комментарии:

1. это ничего не делает для ширины

2. @Case у вас есть max-width на оболочке, которая делает ее похожей на заполнение. Отредактировал мой ответ