Адаптивный дизайн с использованием @media для изменения высоты - PullRequest
Новая
       47

Адаптивный дизайн с использованием @media для изменения высоты

2 голосов
/ 17 января 2020

Я использую метод @media для изменения высоты #services div после изменения размера экрана до ширины 600 пикселей. но по какой-то причине высота div не меняется, и он остается прежним.

Я использую сетку для изменения позиции .service divs после изменения размера экрана, но когда они выравниваются вниз, div #services не меняет свой рост. Я считаю, что он должен измениться, как только @media активируется.

Сетка для изменения классов обслуживания после изменения размера экрана: 

.container-grid {
    margin-left: 17%;
    display: grid;
    grid-gap: 30px;
    grid-template-columns: repeat(auto-fit, 350px);
    grid-template-rows: repeat(2, 400px);
}

@media для изменения #services высота после изменения размера экрана для автоматической высоты: 

#services {
  padding-top: 100px;
  background-color: #000;
  height: 600px;
  padding-bottom: 10px;
  z-index: 0;
}
@media only screen and (max-width: 600px) {
  #services {
    height: auto;
  }
}

Codepen

Как изменить высоту #services с 600 пикселей на автоматическую высоту при изменении ширины экрана?

...