Как заставить абсолютные элементы реагировать быстро?

Question

Я позиционировал эти изображения как абсолютные с левым/верхним процентом.

Но, как я сжиматься браузер ширина изображения начинают overlap.I не установить положение 3-й и 4-м ряду еще, но, как вы можете видеть, что они перекрывают друг друга.

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

Мой контейнер установлен в Относительный блок, изображения как Абсолютные с% шириной и высотой px.

Я получил идею от этого дизайна http://builtbybuffalo.com/, но я понятия не имею, как они это сделали.

Answer 1

Они, как и они, были с media queries. В основном они устанавливают точку останова, когда содержимое начинает плохо выглядеть, и добавляет дополнительный CSS для внесения необходимых корректировок.

Вы можете видеть это в своих css here. Найдите эту строку в этом файле: @media screen and (max-width: 1180px) и посмотрите под ним CSS (вы должны отформатировать CSS, так как он уменьшен, вы можете сделать это с помощью инструментов Chrome Dev или что-то вроде this).