Pavel Designer, если полностью адаптивных — таких мало, потому что крупные компании используют гибридную адаптивность (подгрузка разных вариантов разметки и блоков при изменении разрешения) или мобильную версию для оптимизации загрузки или по причинами сложности или невозможности полностью адаптивной структуры.
Что, собственно, не отменяет мои слова про размеры шрифтов. Никто не использует VW, только пиксели да em/rem. И размеры шрифтов не скачут туда-сюда при изменении размера экрана.
Могут только какие-нибудь тексты с большим размером сделать меньше на мобильных или мелкие элементы сделать больше. Могут немного поменять базовый размер шрифта (16 в основном, планшетном виде и 14 в версии для мобильных).
P. S. Вроде, полностью адаптивные — сайты «Связного» и Apple. Я в пути, поэтому не могу проверить.
Касательно белого пространства: как должен выглядеть блок без наведения и при наведении? По ссылке, по-моему, всё более чем понятно, что нужно сделать — и там это сделано правильно и абсолютно типично.
Только куда и применить это к вашей карточке товара с её текущим дизайном — не понятно.
Так не делают, если мы говорим о responsive-дизайне.
Есть em/rem для шрифтов и размеров, чтобы учитывать предпочтения пользователей относительно базового размера шрифта, который они выставляют. Но на em тогда надо строить большинство вещей, даже брейкпоинты.
Тут вообще многое нужно рассказать, чтобы объяснить. Одним словом, то что хотите сделать вы — это больше похоже на печатную верстку и размеры в vw, что не есть адаптивность. Посмотрите примеры крупных адаптивных и относительно адаптивных сайтов, как у них всё работает при изменении ширины окна в указанных промежутках. Навряд ли вы увидите изменение размера шрифтов в указанных диапазонах ширины окна.
Иван Иванов, у меня есть ещё другая идея, выложите код на Jsfiddle со стилями, иначе мне не понятно нормально. Если не сработает, то тогда напишу ответ с решением выше, спасибо.
P. S. WebGL, JS, ThreeJS.