Выравнивание галереи по центру?

Question

[Underdoggit]

https://goreska.github.io/nlalmaty/

Не могу спозиционировать блок с галереей на адаптиве, на десктопной версии выравнивал блок флексами, обернул его в wrap, и выравнял justify-content: center, задав ширину обертки 100%, а ширину галереи 90%. Но на мобильной - ширина 575 например - блок снова прижат к левому краю. Хелп.

UPD, для разрешения 575 выход нашли в виде transform -50%, блоки позиционируются по центру, но если применить этот же трансформ для разрешения допустим 768 - блоки налезают друг на друга

Answer 1

[Dymok]

Если так попробовать?

@media screen and (max-width: 575px) {
  .grid-item {
    left: 50% !important;
    transform: translateX(-50%);
  }
}

Comments

[Underdoggit]

Пробовал, не вариант, после применения данных правил сбивается адаптив у галереи, и она даже на чуть более больших разрешениях, например 768px - идет вниз в одну колонку, если не задавать. то в 2, но прижата к левому краю

[id_baton4eg]

Underdoggit, т.к. это изотоп галерея она по умолчанию располагает объекты таким образом, её нельзя отцентровать, максимум - можно растянуть обьекты на весь экран, либо отцентровать только если блок не имеет 100% ширины.

[Underdoggit]

id_baton4eg, т.е добавить ей красоты не получится? а то стремно смотрится когда весь контент в центре, а галерея позиционируется слева, или как самый дурацкий вариант - сделать много адаптивных версий для каждого из возможных разрешений?

Answer 2

[CODALSD]

@media (max-width: 575.98px)
.grid {
    width: 50vw;
}
.grid-item {
   width:100%;
}

Как вариант, но картинки будет резать немного

Comments

[Underdoggit]

Режет не только картинку, но и всю структуру блока в том случае если разрешение выше 575, допустим 768, блоки центрируются, но неадкватно к сожалению(

[CODALSD]

хмм... вы куда добавляете стили?
У меня все норм отрабатывает

[Underdoggit]

CODALSD,

Не знаю как получилось что они встали вместе рядом, 2 блока, но сейчас после свойств 50vw и w100%, блоки располагаются по центру растягивая контент, но не встают рядом. Т.е один блок занимает всю ширину.

[CODALSD]

А как все это дело выглядит в скомпилированном? и почему у вас 768 идет ниже чем 575? если mobile first, то каждый стиль нужно явно переписать

[Underdoggit]

CODALSD, это desktop first,
выше 576 прописан 768.
Вот так выглядит исходник media sass

[CODALSD]

Если есть возможность задеплоить на минут 10 в прод, сделайте) посмотрим на скомпилированное чудо

[CODALSD]

Для 768 не получиться по причине того что, блок прыгает на другом разрешении, нужно будет тогда дописать еще один media на 685

[Underdoggit]

CODALSD, Спасибо, вечером попробую сделать более-менее приемлемо, что бы не засирать проект говнокодом и дополнительными медиа запросами, сам виноват, когда делал галерею, не посмотреть что isotop по умолчанию выстраивает контент по левому краю) 685 думаю прописывать смысла нет, так как придется адаптировать и под другие запросы - от 685 до 1999, и я уверен что таких запросов будет еще минимум 4, так как будет прыгать

[CODALSD]

да конечно
в этом плане masonry удобнее
у него есть центрирование

[Underdoggit]

CODALSD, У него есть фильтрация?