Почему код на странице правильно отображается во всех браузерах, кроме приложения Google Chrome на Realme 11 Pro +?

BLM21,
там было так

spoiler

Почему код на странице правильно отображается во всех браузерах, кроме приложения Google Chrome на Realme 11 Pro +?

BLM21, подключите шнурком к компу и проинспектируйте в девтулзах

Почему код на странице правильно отображается во всех браузерах, кроме приложения Google Chrome на Realme 11 Pro +?

BLM21,

Из первой группы не понял, 2 и 3 пункт. Или боюсь не так понять.

2. Зачем вы используете background-clip?
Впрочем, дело не в нём, но тогда я не видела скрина.
Хотя и так и так вопрос актуальный, зачем писать заведомо лишнее.
3. У вас часть свойств фона записана в краткой записи, а потом пачка отдельных. Перепишите аккуратно. Либо туда либо сюда.
Опять же, дело не в этом, но зачем каша в коде.

если не подгружаем svg, ничего не ломается

Довольно странно. Потому что фон все равно не может вылезти из своего блока или как-то влиять на его размеры и жизнь вообще. Разве что ошибки в самом коде.
Но можно попробовать background-size сделать contain вместо %

Почему код на странице правильно отображается во всех браузерах, кроме приложения Google Chrome на Realme 11 Pro +?

BLM21, Попробуйте сделать sentences гридом с row-gap. Ну или флексом тоже с gap.

Другой вариант вместо align-items: center; у sentence__container задать align-self элементам. Или аналогично гридами.

p.s. и я бы уменьшила иконки

Почему код на странице правильно отображается во всех браузерах, кроме приложения Google Chrome на Realme 11 Pro +?

BLM21,

А проблема появляется, как только подгружаем на страницу конкретно этот стиль

Значит, проверяем:
1. Что будет с другой картинкой. Что будет просто с фоном цветом?
2. Узнаем зачем вообще используем background-clip, если бордера отродясь не было.
3. Переписываем свойство bg нормально. Либо всё в краткое свойство либо всё по частям
4. Убираем все шрифтовые параметры
5. Меняем пустой спан на псевдо (ну это так, для порядка)

Дальше тестируем следующую группу:
1. Убираем флекс, а для иконки задаем инлайн-блок. Проверяем.
2. Выясняем зачем две обертки sentence и sentence__container, когда достаточно одной

и т.д.

Почему код на странице правильно отображается во всех браузерах, кроме приложения Google Chrome на Realme 11 Pro +?

BLM21, как выглядит проблема будет информация или по-прежнему нет?

Почему код на странице правильно отображается во всех браузерах, кроме приложения Google Chrome на Realme 11 Pro +?

BLM21, без представления о том, что именно и как ломается гадать сложно.
Я бы проверила настройки шрифтов. Например, если там задан большой минимальный размер шрифта, больше предполагаемого, вполне может ломаться.
Или что-то в таком духе.

Как через css сделать такие блики на bk сайта?

Сохранить как svg и вставить фоном.
Можно сравнить с вариантом с png.

Можно наделать радиальных градиентов.

Можно что-нибудь разблюрить (дороговато для производительности)

Как расположить переход блоков изображением формата svg?

Gorzzoth,

если задать min width в 1600px,он не будет занимать всю ширину экрана

Логика не ясна. Скажете 100% - будет.

а background size отказывается работать если ширина равна 100% или 100vw как и 1600px

Звучит очень интересно.

Похоже, вам пора делать пример кода на codepen.io

По дороге рекомендую обвести рамочкой ваш псевдо. Потому что при последних ваших требованиях высота псевдо будет фикс, как вы хотите, но высота треугольника нет. Потому что вы хотите чтобы выпирал..

Как расположить переход блоков изображением формата svg?

Gorzzoth, для этого есть простенькое свойство min-width.
Ну либо, даже проще, размер фона поставьте 1600.
Правда, кажется, ваши запросы противоречат друг другу. На счёт фикс высоты и потом про overflow.

Так что, наверное, сначала нужно четко разобраться какого поведения вы ждёте.

Ну и всегда есть media

Как расположить переход блоков изображением формата svg?

Это вообще не img. В разметке ему делать нечего.
Проще всего сделать псевдо, ему нужный размер, положение и фон. И preserveAspectRatio

Как теперь экспортировать фоновое изображение без dev mode?

1. Скрыть всё, что сверху (если есть) и экспортировать.
2. Смотреть нередактируемую копию и нажать на ссылку картинки.

Блок во всю ширину сайта, 50% занимает картинка, а 50% черный фон, как поверх добавить и сделать по центру блок 1200px?

Антон Вебсайтовский,

При адаптации надо будет менять только height: 350px;.

Угу. А также при смене контента, при работе автопереводчика страницы и т.д....

Это не контент надо вешать абсолютом. А фоны! И высоту задавать им в процентах от родителя. И не пустыми дивами, а псевдоэлементами.

p.s. не могу смотреть на названия ваших классов. Надеюсь, вы работаете один.

Как сделать скругление в градиенте?

угу, svg, конечно, разумнее

Как сделать скругление в градиенте?

Линейными градиентами достаточно сложно делать скругления...
Может, всё таки радиальные возьмете?

Блок во всю ширину сайта, 50% занимает картинка, а 50% черный фон, как поверх добавить и сделать по центру блок 1200px?

Ну либо 5vw 1fr 1fr 5vw
Либо ещё интереснее

--indent: clamp(20px, 5vw, 100px);
grid-template-columns: var(--indent) 1fr 1fr var(--indent);

Вместо clamp может быть min или max

Как экспортировать из figma в браузере элементы под нужными именами?

rootnoroot, я бы смотрела настройки браузера.

Как экспортировать из figma в браузере элементы под нужными именами?

rootnoroot, даже попробовала в браузере: прекрасно спрашивает куда и как сохранить. Разумеется по одному. Оптом будет архив.

Как экспортировать из figma в браузере элементы под нужными именами?

Переименуйте слои как душе угодно и сохраняйте

Как задать дочернему элементу высоту родителя, у которого высота зависит от контента?

child с белым фоном не должен содержать внутри себя ничего и это должен быть div блок

Может, тогда всё вообще не так? Пустые блоки с большой долей вероятности это чьи-то костыли.
Может, это всё таки border, градиент или псевдо, а вовсе не то, вы пишете?

https://codepen.io/AnnaSummer/pen/OJrqdPp