но не будет ли это влиять на производительность и скорость загрузки, например если позиций будет 100 или 1000 позиций
Попробуйте конкретно на вашем сайте ;)
Цвет, если что, можно поменять так (мало надежно и зависит от шрифта, что там с символами, но немножко подшаманить можно) https://jsfiddle.net/Ankhena/5jecmvw0/
Начать с вопросов к дизайнеру, о чем он думал, выбирая шрифт, его размер и жирность.
Если дизайнер это вы, то тут сложнее )) Смотрите до каких пределов можно уменьшить шрифт или придумывайте как перенести посимпатичнее. Или подберите другое начертание.
Некоторые шрифты нормально выглядят только крупными, а другие вполне уменьшаются и читаются.
В теории есть плагины типа fittext.
Но нужно понимать, что если слово слишком длинное, то шрифт может оказаться слишком мелким.
При уменьшении шрифта на мобилках нужно помнить о том что:
1. Текст должен читаться не только теми у кого 1 и неуставшие глаза.
2. В браузере может стоять запрет на уменьшение размера шрифта меньше чем N пикселей.
3. Некоторые дизайнеры, наоборот, на мобилках делают шрифт крупнее.
Т.е. если слово больше, чем ширина окна и это не заголовок, то можно включить переносы.
Что я обычно делаю в таких случаях: прошу убрать пункты, которые меня не устраивают или предлагаю другие формулировки. А также прошу добавить те пункты, которые важны мне.
Ведь мы договариваемся о сотрудничестве на каких-то условиях.
Ну да, у флексов не бывает переносов без wrap. Вам чем-то не угодило это свойство?
А дальше разбираться с шириной блоков и заодно почитать про flex-shrink и flex-grow.
И про box-sizing не забудьте по дороге, чтобы не было сюрпризов.
Возможно, вам больше понравятся в этой ситуации гриды. Но из вопроса не совсем понятно что должны делать элементы на второй строке, как растягиваться.
Хорош бы вопрос формулировать так, чтобы было понятно что не так, как должно быть и почему нельзя wrap.
Вы тут первый раз задаете вопрос, поэтому рекомендую всё таки ознакомиться с правилами. Код скринами тут выкладывать нельзя. Либо кодом либо готовой песочницей на сервисах типа codepen.io или аналогах. Либо код в спойлер и ссылку на песочницу (вообще супер)
Но потом вам захочется закрывать его по клику мимо кнопочек (это можно сделать и таргетом, но это не модалка и пользователи могут и не захотеть закрывать эту панельку), закрывать нажатием на ту же самую кнопочку и подобное.
GeorgiyStepanov,
1. Прочитайте про тень.
2. Почитайте про работу позиционирования на MDN, Доке или любом другом удобном вам ресурсе.
Элементы с absolute позиционируются относительно ближайшего родителя с position отличным от static (т.е. если нужному родителю не нужно позиционирование, то это relative). Если такого родителя нет, то относительно окна браузера.
У img нет дочерних элементов, относительно него никого нельзя спозиционировать (ну кроме его псевдоэлементов, когда сама картинка недоступна)
GeorgiyStepanov, может, стоит relative задать тому, относительно кого позиционируете? Не от вьюпорта же вам нужно?
Картинку можно заменить на любую подходящую из сервиса заглушек (например, https://picsum.photos/) или из Яндекс картинок или со своего хостинга, если по https.
Но и сейчас этот псевдо никуда не сместится. Куда прибили, там и будет.
Зачем проверку? Всё, что до точки и всё что после, обычной регуляркой.