Как сверстать эту секцию?

Question

[Super Star]

Вот такая вот штука:


Я выстрою 5 блоков вряд с помощью after добавлю полоску, но я понятия не имею как адаптивить =( Как оно должно выглядеть на 768, 480 и 320. понятно что на 768 5 штук уже не уместятся. Может кто подкинуть подобную реализацию. Я столько шаблонов перелопатил и не нашел подобного или советом.

Как быть?

Comments

[Ivan Stroykin]

Я бы сделал так. При разрешении, когда перестают помещаться уменьшил бы круги и полосы (:after), потом сделал змейкой (по 2 в ряду) а линии (:after) идут влево-вниз-вправо-вниз...

[Ярослав Иванов]

У вас фантазия отсутствует ?

[Super Star]

Иван Стройкин: У меня драйвера встроенного ГП отвалились( не могу это в голове представить), а можно рисунок =)

[Ivan Stroykin]

Кто-нибудь может нарисовать то, что я описал?) я с телефона ото

[Ярослав Иванов]

Иван Стройкин: с телефона нарисуй )))

[Super Star]

Иван Стройкин: Если будет время нарисуйте с ПК я не тороплюсь и могу подождать пару дней

[Ivan Stroykin]

Андрей Рысь: Завтра зайду. Если будет время пример сделаю, если не будет, то рисунок. Главное напишите мне ответ, чтобы уведомление на почту пришло и я не забыл :)

[Ivan Stroykin]

Андрей Рысь: Грубый вариант. Идея думаю понятна - codepen.io/StivinKing/pen/NdbJoK (при ширине менее 900px срабатывает перестроение)

[Super Star]

Иван Стройкин: Спасибо

[Ivan Stroykin]

Андрей Рысь: Подходит такой вариант?)

Answer 1

[WQP]

Вот так. И ширину полосы в % надо

Comments

[Super Star]

а min-height для секции не прокатит? или я не так понял. Ну ладно на 768 я немного уменьшу полосы и может быть размеры блоков и потом на 480 уже делать как на 2м рисунке т.е. вертикально?

[Super Star]

я тупанул насчёт min-height . понял я про полосу

Answer 2

[Виталий]

Как оно должно выглядеть на 768, 480 и 320.

Как дизайнер задумает .. мб оно в кружек свернётся ;)

понятно что на 768 5 штук уже не уместятся

например, 3 +2 в 2 ряда. inline-block + text-center

Comments

[Super Star]

Дело в том что я скачал этот шаблон из интернета. Верстаю сам для себя. Я не нашел готового HTML шаблона с подобной секцией. Маюсь теперь и не знаю что делать.

Answer 3

[sergey]

Не вижу проблемы что бы адаптировать эту секцию, как сказали выше полоски в %, но также можно:
а) перестроить их порядок на меньших расширениях; (десктопная версия и мобильная не обязаны совпадать, и потому на мобильном расширении полоски вообще можно убрать к примеру)
б) уменьшать до возможного размер самих иконок;
короче было бы желание а решение всегда найдется

Answer 4

[Ankhena]

Андрей Рысь: да любое поведение можно делать
- в столбик
- в 2 ряда
- в 3 ряда
- убрать рамки у иконок, оставить только значки, уменьшать их
- собрать в одну и листать слайдером
- поставить в столбик и заменить словами (или словами с маленькими иконками)
- еще что-нибудь