Keany,
На реальном смартфоне (460) я не вижу прокрутки.
Вижу в девтулзах на ширине побольше.
spoiler
И таких мест несколько.
Альтернативный вариант, если прям не видно, но прокрутка есть (очень странно, но ладно), удаляйте блоки по одному или отображайте по одному.
Кстати, забыли обвести псевдоэлементы.
Что интересного успела увидеть:
1. За вот это maximum-scale=1 нужно отрывать руки. Если человек чего-то не видит или не может попасть пальцем по какой-то микро-кнопельке, он должен иметь возможность увеличения.
2. Вы делаете разные дивы для показа разных картинок. Это дублирование контента.
Уже давно придуман тег picture, используйте его.
К нему в комплекте удобно использовать display: contents, чтобы не мешался, например, в гридах. Да и вообще не мешался.
3. И семантика в целом. Дивы вместо списков или dl, параграфы вместо заголовков.
Фоновая волна - clip-path и вообще легко гуглятся.
Волны наложения: тут классические варианты выбора bg size
Чтобы сломать пропорции SVG нужен атрибут preserveAspectRatio
Да и всё вроде
Может быть, можно достать из макета волны целиком, без обрывающихся линий по краям. Тогда ещё вариант просто расположить по центу и ок.
И да, обычно такие волны в растре весят заметно меньше, чем векторные. И тогда image-set и media.
1. https://developer.mozilla.org/en-US/docs/Web/CSS/p...
2. &::before:hover это дичь/ У псевдоэлементов нет состояний.
3. Нельзя писать текст ошибки в псевдоэлемент. Это контент, который должен быть доступен всем.
На реальном смартфоне (460) я не вижу прокрутки.
Вижу в девтулзах на ширине побольше.
И таких мест несколько.
Альтернативный вариант, если прям не видно, но прокрутка есть (очень странно, но ладно), удаляйте блоки по одному или отображайте по одному.
Кстати, забыли обвести псевдоэлементы.
Что интересного успела увидеть:
1. За вот это
maximum-scale=1нужно отрывать руки. Если человек чего-то не видит или не может попасть пальцем по какой-то микро-кнопельке, он должен иметь возможность увеличения.2. Вы делаете разные дивы для показа разных картинок. Это дублирование контента.
Уже давно придуман тег picture, используйте его.
К нему в комплекте удобно использовать display: contents, чтобы не мешался, например, в гридах. Да и вообще не мешался.
3. И семантика в целом. Дивы вместо списков или dl, параграфы вместо заголовков.