ehoboli, ок. Я написала алгоритм.
Что из этого вы можете сделать/нагуглить, а что нет?
Пока у вас нет ни намека на какие-то пробы и тогда это задание, а не вопрос.
Что конкретно у вас не получается?
Разбейте задачу на мелкие:
1. Узнать высоту блока
2. Сравнить два значения
3. Написать условие
4. Показать блок
5. Скрыть блок
6. Проверять при перестроениях
LI4NOOST, вариант без обертки не очень хорошо живет при адаптиве. Но раз удаление обертки помогло, то скорее всего проблемы были с её стилями. Старайтесь делать песочницы с видимой проблемой на codepen.io или аналогах, так вы быстрее получите ответ и он будет более точным, а не предположения.
SherbakovFirst, плагин действительно называется autoprefixer, с этой частью вопроса вы справились самостоятельно.
Ваши "вебкиты" это вендорные префиксы. Погуглите что это и зачем.
Кроссбраузерность лучше всего проверять в разных браузерах и на разных устройствах (в офисе, у друзей, знакомых и т.д.).
Но есть и специальные сервисы типа Browserstack. Бесплатно 30 секунд на каждый браузер/устройство.
в svg в данный момент стоит fill="red" но почему-то не красная как покрасить?
Не красная она потому что у всех элементов внутри задан другой fill, который перебивает.
Либо красить по отдельности либо убрать fill у дочерних и оставить только у svg.
Либо вообще убрать из svg и задавать через стили fill.
Либо оставить как есть и использовать в стилях как mask (для псевдо), меняя цвет с помощью background-color
