css grid медиа запрос - PullRequest
Новая
       16

css grid медиа запрос

0 голосов
/ 14 ноября 2018

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

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

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

Mediq-запрос 

/* 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;
    }
}

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

1 Ответ

0 голосов
/ 14 ноября 2018

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

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

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

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

...