css сетка медиа-запрос

Во-первых, это не мой код, следуя инструкциям, но у меня возникла проблема с медиа-запросом. Использование браузера Chrome

Большой экран css, который отлично работает

/* Navigation */
.main-nav ul {
    display: grid;
    grid-gap: 20px;
    padding: 0;
    list-style: none;
    grid-template-columns: repeat(4, 1fr);
}

Медицинский запрос

/* Media Queries */
@media (max-width: 700px) {
    .top-container {
        grid-template-areas: 
            'showcase showcase'
            'top-box-a top-box-b';
    }

    .showcase h1 {
        font-size: 2.5rem;
    }

    .main-nav ul {
        grid-template-columns: 1fr;
    }
}

Медиа-запрос работает, за исключением main-nav, который по-прежнему показывает четыре элемента ul по горизонтали, а не отдельные параметры по горизонтали.


css css-grid media-queries
person ScaryMinds    schedule 13.11.2018    source источник
comment
Возможный дубликат Flex grid не изменяет размер для запросов @media   -  person First Name    schedule 14.11.2018

Ответы (1)


arrow_upward
0
arrow_downward

Судя по тому, как выглядит ваш код в настоящее время, все работает, насколько я понимаю вашу проблему. Я создал JSFiddle, чтобы воссоздать то, над чем вы работаете. Не могли бы вы изменить его и показать нам свой код в связи с проблемой?

Мое единственное другое предложение, не видя ваш DOM, - попробовать также использовать grid-template-rows, чтобы точно указать, сколько строк он должен заполнить (хотя вам это не нужно):

@media (max-width: 700px){
    .main-nav ul {
        grid-template-columns: repeat(4, auto);
    }
}

http://jsfiddle.net/fqx7hayb/11/

person Ryan    schedule 13.11.2018