А теперь добавьте это в песочницу.
Потому что, когда это делаю я, то получается всё как нужно.
И судя по комментарию выше, так получается не только у меня.
p.s.
1. Лучше бы этот "футер" с картинкой прибивать гридами или флексами. Гуглите стики футер.
Чтобы случайно не налез на контент.
2. И всё таки это не контентная картинка. Alt waves даром не сдался ни пользователям скринридеров ни хозяевам сайта для продвижения. Такие картинки либо убирают в стили (лучше) либо скрывают от скринридеров с помощью aria-hidden. И, соответственно, убирают alt (оставляют пустым)
3. Глаже будет SVG
Aleksey Solovyev,
1. Мусор. В разметке должен быть смысл. А украшения в стилях.
2. Лишний элемент в DOM. Пока он один на простой странице это не страшно. (Я как-то удалила больше 10 тысяч лишних оберток со страницы лендинга, хозяева которого жаловались на тормоза)
3. Велик шанс того, что он будет удален из разметки другим разработчиком. И это логично, он ведь пустой.
Использование пустых тегов вместо псевдоэлементов один из признаков плохого кода.
А в данном случае даже псевдоэлемент не нужен, если я правильно понимаю задачу автора. Но раз отметил решением, видимо, правильно.
Виталий Першин, Виталий, если в браузере установлен минимальный размер шрифта, то при вашем варианте он не уменьшится ниже этого значения.
Чтобы точно это увидеть, можно поставить утрированное значение.
Я только про это.
А не про идею автора уменьшать блок пропорционально высоте. Она очевидно плохая.
Вы хотите противоречивого поведения в случае, когда одна строка и когда две, поэтому либо с девятками либо перестраивать через media (но тут надо знать ширину перестроения, с учетом ширины кнопки).
Вы точно не забыли настройку минимального размера шрифта?
Для FF нужно делать нормальную страницу, а не песочницу. (По крайней мере у меня только так вышло в FF, в Хроме и так и так)
Как сделать чтобы белый блок с опросом пропорционально масштабировался вместе со шрифтами, отсутпами и т.д.
А что будет, если у пользователя открыты девтулзы или браузер открыт узкой полоской?
Что можно использовать:
- единицы vw, vh, vmin, vmax
- функции min, max, clamp
- для визуальных отступов можно использовать гриды или поставить их в зависимость от размера шрифта.
Сделать песочницу с демонстрацией проблемы на codepen.io, jsfiddle.net или аналоге.
По дороге, наверное, имеет смысл разобраться с transition all. Особенно оно интересно выглядит с учетом того, что единственное свойство, которое вы меняете в явном виде это display, который не анимируется в принципе. Но, возможно, это не все свойства. Так что, делайте песочницу.
Олег, если предположить, что есть body не являющееся прямым потомком html и есть другие h1, а также, что мы не умеем или не можем дописывать классы, то, конечно, придется.
Но в контексте задачи автора заметно проще и быстрее сделать нормальный адаптив или переверстать с нуля, чем впутываться в такое ... Слово подставьте сами, у меня пригодных к публикации нет.
А теперь добавьте это в песочницу.
Потому что, когда это делаю я, то получается всё как нужно.
И судя по комментарию выше, так получается не только у меня.