1

На полноэкранной версии меню имеет равные отступы с другми флекс-элементами введите сюда описание изображения

При разрешении менее 1500 px я с помощью грида сделал двухстрочное меню, но далее при уменьшении разрешения элементы схлопываются друг с другом и я не понимаю почему.

@media screen and (max-width: 1500px) {
  

   .menu > ul  {
      display:  grid;
      width: 100%;
      grid-template-columns: repeat(4, max-content);
      background-color: red;
  }
}

введите сюда описание изображения

Как сделать так, чтобы при уменьшении разрешения экрана, меню имело равные отступы с другими флекс-элементами?

Весь код https://jsfiddle.net/zobq0nma/ Сам сайт ilini0v1.beget.tech

3
  • grid-template-columns: repeat(4, minmax(170px, max-content)); 7 июн 2021 в 19:30
  • это ничего не дало
    – Sort
    7 июн 2021 в 19:44
  • gap: 20px; добавить можно в .content 7 июн 2021 в 19:51

1 ответ 1

1

Напишите в ваш медиа запрос @media screen and (max-width: 1500px) следующее:

.menu {
    margin: 0 10px;
  }

Отступы от меню будут по 10 пикселей с обоих сторон


Вот так по итогу должно выглядеть:

@media screen and (max-width: 1500px) {
  .menu > ul  {
    display:  grid;
    width: 100%;
    grid-template-columns: repeat(4, max-content);
    background-color: red;
  }

  .menu {
    margin: 0 10px;
  }
}
3
  • а как сделать так, чтобы расстояние между li в меню было не таким большим?
    – Sort
    7 июн 2021 в 19:28
  • 1
    Столбики в меню при сжатии имеют такие большие расстояния между друг другом потому что эти 4 столбика распределяются по всей ширине блока, то есть по 25% на каждый столбик, при сужении они всё так же имеют свои 25%, но так как сам блок становится меньше, каждый проблемы между столбиками тоже становятся меньше 7 июн 2021 в 19:52
  • Решения 1) Самое простое и в принципе нормальное решение это задать фиксированную ширину для меню, в таком случае столбики не будут разъезжаться или съезжаться, и меню всегда будет выглядеть неизменно. Для этого в том же медиа запросе, там где пишите свойства для .menu > ul для свойства width: напишите, например, 650px. 2) написать в .menu > ul { в свойстве width значение, например, 75%. с процентами можете поиграться сами, как вам больше нравится сделать. В случае с процентами лучше убрать margin: 0 10px; у .menu 7 июн 2021 в 19:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.