Почему на боковой панели сетки не отображается содержимое рядом с основной областью? - PullRequest
Новая
       13

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

0 голосов
/ 04 января 2019

У меня есть боковая панель внутри моего запроса Desktop @media, и она используется только в этом медиазапросе.

Когда я расширяю область просмотра для этого запроса @media, он отображается нормально, и в основной области освободилось место для моей боковой панели.

Однако на боковой панели отображается только контент рядом с моей рекламой, а не рядом с моей основной областью. Это просто пустое пространство, как будто пространство было выделено для боковой панели, но не может быть использовано.

Что мне здесь не хватает?

Я пробовал много комбинаций grid-area-template. Не повезло.

enter image description here

HTML: 

  <div class="container">
    <header> Some Anchors </header>
    <advert class="bg-righttoleft"></advert> 
    <main> LOTS OF CONTENT </main>
    <sidebar> A background-image in CSS </sidebar>
    <footer>Maximilian Crosby ©</footer>
  </div>

CSS: 

.container  { /* Mobile */
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 50px 340px 1fr 50px;
  grid-template-areas:
    "header"
    "advert"
    "main"
    "footer";
  text-align: center;
}

@media only screen /* Tablet */
  and (min-width: 885px) {
    .container  {
      grid-template-columns: 1fr;
      grid-template-rows: 50px 340px 1fr 50px;
      grid-template-areas:
      "header"
      "advert"
      "main"
      "footer";
    }
  }

@media only screen /* Big Tablet */
  and (min-width: 1170px) {
    .column-text  {
      min-height: 260px;
      padding: 20px 0 0 0;
    }
  }

@media screen /* Desktop/Laptop */
  and (min-width: 1900px) {
    .container  {
    max-width: 2500px;
    grid-template-columns: 250px 1fr;
    grid-template-rows: 50px 340px 1fr 50px;
    grid-template-areas:
      "header header"
      "sidebar advert"
      "sidebar main"
      "footer footer";
    }

    sidebar  {
      background: url(./history-vr-banner.jpg);
    }
  }

Я ожидаю, что содержимое боковой панели будет использовать все пространство рядом с рекламой и основными областями.

В данный момент он охватывает только область рядом с рекламой. ПРИМЕЧАНИЕ. Для боковой панели рядом с основной областью выделено пространство, поскольку основная область сместилась вправо от области просмотра, оставив пустое пространство слева.

1 Ответ

0 голосов
/ 04 января 2019

Я думаю, что нашел проблему. Ваш контейнерный класс помещает все текстовые центры, включая изображение. Удалите текстовый центр из контейнера, и он должен работать.

...