Комментарий #9163678

Cosmo ☭
Достижения. Вертикальные
для нормальной ширины сайта 1200px >
1221x861
@media screen and (min-width: 1200px) {
  #profiles_show .achievements .cc-2 > .c-column:first-child,
  #profiles_show .achievements .cc-2 > .c-column:nth-child(2) {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  #profiles_show .achievements .cc-2 > .c-column:nth-child(3),
  #profiles_show .achievements .cc-2 > .c-column:nth-child(4) {
    width: 100%;
    margin-right: 0;
    margin-bottom: 7px;
  }
  #profiles_show .achievements .cc-2 > .c-column:nth-child(4) {
    margin-left: 0;
    margin-top: 0;
    margin-bottom: 0px;
  }
  #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge {
    margin: 3px 2.85% -3.65% 0.5%;
    right: -5px;
  }
  #profiles_show.p-profiles-show .achievements .cc-authors .b-achievement {
    margin: 15px 0.92% 15px 0.92%;
  }
  #profiles_show .achievements .c-column:nth-child(1) .cc-achievements .b-achievement,
  #profiles_show .achievements .c-column:nth-child(2) .cc-achievements .b-achievement {
    width: 23.2%;
  }
}
Расширит франшизы до 8шт >
1228x1007
@media screen and (min-width: 1200px) {
  #profiles_show .cc-franchises {
    flex-wrap: wrap;
    justify-content: center;
    position: relative;
  }
  #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge {
    width: 21.6055%;
    margin: 3px 2.85% -2.35% 0.5%;
    right: -4px;
  }
  #profiles_show .achievements .cc-2 > .c-column:nth-child(4) {
    margin-top: -5px;
  }
  #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge:nth-child(5),
  #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge:nth-child(6),
  #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge:nth-child(7),
  #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge:nth-child(8) {
    display: block;
  }
}
Сузить контент >
1211x967
@media screen and (min-width: 1200px) {
   #profiles_show .cc-franchises,
   #profiles_show .achievements .cc-authors {
      padding: 0 40px;
  }
   #profiles_show .cc-achievements {
      padding: 0 40px;
   }
}
или так >
1522x757
@media screen and (min-width: 1200px) {
   #profiles_show .achievements .cc-2 > .c-column:first-child,
   #profiles_show .achievements .cc-2 > .c-column:nth-child(2) {
      width: 100%;
      margin-left: 0;
      margin-right: 0;
   }
   #profiles_show .achievements .cc-2 > .c-column:nth-child(3),
   #profiles_show .achievements .cc-2 > .c-column:nth-child(4) {
      margin-bottom: 0;
      width: 49.5%;
   }
   #profiles_show .achievements .cc-2 > .c-column:nth-child(3) {
      margin-right: 1%;
   }
   #profiles_show .achievements .cc-2 > .c-column:nth-child(4) {
      margin-left: 0;
      margin-top: 0;
   }
   #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge {
      margin: 4px 4.33% -3% 0;
      width: 29%;
   }
   #profiles_show .achievements .cc-authors .b-achievement:nth-child(5),
   #profiles_show .achievements .cc-authors .b-achievement:nth-child(6) {
      display: inherit;
   }
   #profiles_show .achievements .cc-authors {
      flex-wrap: wrap;
      right: 1px;
      position: relative;
   }
   #profiles_show.p-profiles-show .achievements .cc-authors .b-achievement {
      width: 30.8%;
      margin: 16.75px 1.25% -0.5px 1.25%;
   }
   #profiles_show .cc-franchises {
      flex-wrap: wrap;
      justify-content: center;
      position: relative;
      left: 2px;
   }
   #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge:nth-child(5),
   #profiles_show.p-profiles-show .achievements .cc-franchises .b-badge:nth-child(6) {
      display: block;
   }
}
Ответы

Нет комментариев

назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть