Как правильно оформить эти маркеры?

Question

[angry_yum]

Добрый день. Подскажите новичку как правильно оформить так маркеры списка? При этом чтобы это было максимально адаптивно
Заранее большое спасибо.

Answer 1

[Сергей Горячев]

Например вот так https://jsfiddle.net/qknvv35m/
Размерами и цвета баловаться сам будешь, набросал просто вариант.

При этом чтобы это было максимально адаптивно

Просто на медиа-запросах переделай width: 50% на width: 100%, когда нужно будет.
https://jsfiddle.net/qknvv35m/3/

Comments

[Никита Кит]

min-width для li забыл. Без него flex-wrap не нужен

[Сергей Горячев]

Никита Кит, не совсем понял, что ты имеешь ввиду, указан width, который и будет выступать, как min-width и max-width в данном случае. А flex-wrap нужен для переноса блоков на строки.

[Никита Кит]

Сергей Горячев, если width указан в % (в твоём случае 50) то блок с этим width не перенесётся никогда. Он не будет выступать в роли min-width, потому что min-width нужен в px, чтобы на минимальной ширине экрана он переопределял базовые 50%
Вот. Сожми и узри отличие:
https://jsfiddle.net/qknvv35m/1/

[Сергей Горячев]

Никита Кит, геморрой. Лучше одним медиа-запросом перестроить width: 50% на width: 100%, и будет красиво, а min-width делает ненужное пустое пространство.

[Сергей Горячев]

Никита Кит, https://jsfiddle.net/qknvv35m/3/ правильно и красиво, без всяких min-width.

[Никита Кит]

Сергей Горячев, мне было лень его писать, потому что в фидле не был добавлен sass, а я люблю писать их прямо в параметрах (sass позволяет))
А вообще без медиазапросов полезнее. Хотя на производительность это особо не давит, новичкам полезно знать как можно сделать без них, используя такие вещи как min и max, flex-wrap

[Никита Кит]

Сергей Горячев, насчёт "правильно и красиво" я предпочитаю больше слушать дизайнеров. Порой пустое пространство полезно (не в данном контексте)

[Сергей Горячев]

Никита Кит, соглашусь с тем, что новичкам полезно знать, что можно "так и так". Чем больше знают, тем лучше. Но на практике, при верстке проекта, чесслово, убил бы новичка за такое применение. У меня джун был в подмастерье, он тоже говорил, что медиа-запросы для слабаков, можно все без них сделать. Хороший был малый, 2 месяца поверстал и ушел в бэк)

[Сергей Горячев]

Никита Кит, ну, "правильно и красиво" я применил именно к этому контексту. Возможно, в других ситуациях будет правильно и красиво совсем по другому)

[Сергей Горячев]

Никита Кит, И да, на фиддле есть SCSS) Но я стараюсь не оформлять код в JADE PUG SCSS SASS для новичков)

[Никита Кит]

Сергей Горячев, 2 года верстаю, как считал, что меньше медиа лучше, так и остаюсь до сих пор на своём. Я люблю компилировать sass в как можно меньший объём байт. И тут медиа тоже играют роль.
Оффтоп: Особенно сильно мне в этом плане помогают тихие классы SCSS (%) - почитай о них. А может слышал =)

[Сергей Горячев]

Никита Кит, тихие классы и БЭМ у меня как-то не сильно связались)

[Никита Кит]

Сергей Горячев, а у меня отлично

[Сергей Горячев]

Никита Кит, может невнимательно рассматривал, может не сильно зацепило)))) Как будет время, почитаю подробнее)

[Никита Кит]

Сергей Горячев, результат, как говорится, влицо

Правда бывают проблемы с переопределением, решение которого - либо переопределение на уровне модификатора тихого sass модуля (в данном случае plate) либо !important на уровне блока

[Сергей Горячев]

Никита Кит, вот у меня такая проблема и была, из-за этого и не стал использовать скорей всего. Импортант просто не использую принципиально. А на уровне МФ не всегда запомнишь, где и как. Переопределения вообще страшная штука для командной работы или для проекта который будет на долгосрочной поддержке.

[Никита Кит]

Сергей Горячев, ну я их использую только в модификаторах, сколько проектов не писал (один уже оч громадный, что аж pug на core i3 компилит шаблоны 12 сек) и даже в тиме через git , а проблем с important ни разу не было. Модификаторами можно. Вне их тоже никогда не юзаю

[dom1n1k]

правильно и красиво

А что красивого-то, если маркированные списки должны располагаться по столбцам, а не строкам? :) Это не карточки.

[Сергей Горячев]

dom1n1k, ну, список с большим кол-вом текста никак не будет смотреться хорошо в 2 столбца на мелких экранах.

[dom1n1k]

Пункты должны идти по столбцам, а не по строкам (flex-direction: column). А уж сколько тех столбцов на каком экране будет - вопрос второй.

[Сергей Горячев]

dom1n1k, ну, не знаю, в данном контексте невозможно определить, какой должен быть порядок.
Мне чаще встречается именно построчное состояние.

[dom1n1k]

Ну это обычные профнепригодные провинциальные "дизайнеры" (неуместное центральное выравнивание, дефис в роли тире, капс без трекинга и пр).
Карточки должны идти по строкам, текстовые списки - по столбцам.