Как я могу сделать одну строку insta-feed в 2 столбцах в моей мобильной версии? - PullRequest
0 голосов
/ 10 апреля 2019

Мой Instafeed отображается как одна строка на моем мобильном телефоне, но я хочу, чтобы он отображался как 3 строки и 2 столбца вместо одного столбца с 5 сообщениями. Как я могу пойти по этому поводу? Я пытался использовать? Помощь будет принята с благодарностью. это то, как мой канал Instagram выглядит в настоящее время на мобильном телефоне , а это - это то, как я хочу, чтобы оно отображалось на мобильном телефоне.

CSS:

#instafeed .instagram__item {
    position: relative;
    margin-bottom: 20px;
  }

  .instagram__item:after {
    content: "";
    display: block;
    padding-bottom: 100%;
  }

  .instagram__link {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }

  .instagram__bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
  }

  .instagram__video-link {
    &:after, &:before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 2;
    }
    &:after {
      width: 0;
      height: 0;
      border: 16px solid transparent;
      border-left: 20px solid #fff;
      margin-top: -18px;
      margin-left: -7px;
      -webkit-filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.25));
    }
    &:before {
      margin-top: -34px;
      margin-left: -34px;
      width: 60px;
      height: 60px;
      border: 3px solid #fff;
      border-radius: 50%;
      box-shadow: 0 0 4px rgba(black, 0.18);
      background: rgba(black, 0.42);
      transition: background 0.3s ease;
    }
    &:hover {
      &:before {
        background: rgba(black, 0.7);
      }
    }
  }

  .social-feeds-wrap {
    .sixteen {
      .columns:nth-child(4n + 1){
        margin-left: 0;
      }
      .columns:nth-child(4n + 4){
        margin-right: 0;
      }
    }
    .eight {
      .columns:nth-child(odd){
        margin-left: 0;
      }
      .columns:nth-child(even){
        margin-right: 0;
      }
    }
  }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...