Почему столбцы сетки не расширяются на всю ширину при просмотре в мобильном представлении? - PullRequest
Новая
       8

Почему столбцы сетки не расширяются на всю ширину при просмотре в мобильном представлении?

0 голосов
/ 27 марта 2020

Я пытаюсь выяснить, почему я не могу заставить этот шаблон сетки расширяться и / или даже центрировать область просмотра. Он отлично работает и, как и ожидалось, в режиме рабочего стола ...

Есть идеи? Дайте мне знать, если вам потребуются дополнительные фрагменты кода.

here is a screenshot of the problem

.grid-container-columns {

height: 100%;

display: grid;

grid-template-columns: repeat(12, 1fr);

grid-gap: 16px;

align-content: stretch;

}

header#home-section h1 {

grid-column: 3/span 8;

justify-self: center;

align-self: center;

text-align: center;

padding-top: 10rem;

z-index: 1;

}

Контейнерный блок обеспечивает максимальную ширину 1100 пикселей с полем 0 auto.

Спасибо за любую помощь!

Ответы [ 2 ]

1 голос
/ 27 марта 2020

Я думаю, вы хотите удалить эти пробелы между ними? Если это так, измените значение 

grid-gap: 16px;

на 

grid-gap: 0;

Или даже полностью удалите его, если не используете его. Также для центрирования вам понадобится 

html, body{
   overflow: hidden;
}
0 голосов
/ 27 марта 2020

Я не знаю, чего вы хотите, но из описания я понял, что ваше тело не адаптируется к экрану мобильного телефона. Пожалуйста, удалите следующий класс div 

<div class="grid-container-columns grid-container-two-rows">

и поместите только класс grid-container и Кроме того, зачем вам нужен контейнер bootstrap? Пожалуйста, сформулируйте ваши вопросы, чтобы люди могли понять, чего вы ожидаете, добавив дополнительное описание и код.

...