Как поправить Flex Box верстку?

Question

[keche]

Верстка сайта whister.websozidatel.ru отображается нормально на всех новых браузерах, в том числе и на мобильном google chrome для андроид на телефоне samsung galaxy grand 2 duos. А вот стандартном браузере, отображается все нормально кроме блоков "Преимущества велосипеда Whister Elite" и "Процесс доставки велосипедов".
В преимуществах сжимаются картинки иконок , и чем больше текста в блоке, тем сильнее деформируется картинка. Если например картинки обернуть в блок div, то картинка принимает свой нормальный размер, а текст просто налазит поверх этих картинок.
В доставке блок выравнивается не по центру , хотя задано свойство justify-content: center для контейнера.
Пользовался автопрефиксером https://autoprefixer.github.io/ru/, чтобы адаптировать сайт под старые версии мобильных браузеров.

Comments

[Hyubert]

попробуйте для картинки задать
flex: 1;

Answer 1

[Егор Живагин]

1 - Это же обычное поведение флексов. Когда места не хватает, блоки начинают сжиматься. Так что тут смотри скорее, почему не хватает места блокам - шрифт больше, стандартные браузерные отступы больше, ...

2 - Ощущение, что сам флексбокс-контейнер просто не на всю ширину. Можно исправить с margin: 0px auto;

Кроме того, если у тебя старая версия android / браузера, то это грустно
can i use

Comments

[keche]

1. На новых браузерах, картинки не сжимаются как на старых. Это странно, но факт.
А куда еще шрифт больше? Там единственном что ограничить p блоку можно только в %, чтобы картинки не сжимались.
2. Пробовал margin: 0px auto, не работает.