При скрытии img в media queries сбивается выравнивание остальных img, сделанное с помощью flex. Как пофиксить?

Question

[kutovoy_10]

У меня есть 12 картинок. Выравнивание сделанное с помощью flex. В media queries мне нужно скрыть 6 картинок. Скрываю через display: none. В итоге получается, что 4 картинки выравниваются нормально, а последние 2 съезжают в сторону. Не знаю как это решить, помогите, пожалуйста. Приложу картинку, код HTML/CSS и скриншот проблемы. Делать только на flex!

Скриншот проблемы


Ссылка на код
https://codepen.io/danil10/pen/gqWojp

Answer 1

[Амир Алимжанов]

Друг мой, вы скрываете сами картинки , а ссылки картинок не скрыли, вот их то и видит флекс-контейнер. И сделайте отступ у ссылок через margin: 7.5px, а gallery_block margin: 0 -7.5px. И почитайте про семантику, я про то что эту галерею надо делать так:

<div class="gallery">
  <ul class="gallery__list">
    <li class="gallery__item">
      <a class="gallery__link" href="#">
        <img src="img.jpg" alt="smiles">
      </a>
    </li>
    <li class="gallery__item">
      <a class="gallery__link" href="#">
        <img src="img.jpg" alt="smiles">
      </a>
    </li>
  </ul>
</div>

Answer 2

[Владимир]

Выложите на jsfiddle что ли...

Comments

[kutovoy_10]

Обновил!