Попробуйте сделать sentences гридом с row-gap. Ну или флексом тоже с gap.
Другой вариант вместо align-items: center; у sentence__container задать align-self элементам. Или аналогично гридами.
.sentence:before {
width: 3.25em;
height: 3.25em;
min-width: 3.25em;
margin-right: 0.625rem;
content: "";
background: url("/img/icons/check-mark.svg") no-repeat;
background-size: 100% 100%;
}.sentence:before {
width: 3.25em;
height: 3.25em;
min-width: 3.25em;
margin-right: 0.625rem;
content: "";
background-size: 100% 100%;
}background: url("/img/icons/check-mark.svg") no-repeat;угу, а там просто какой-нибудь дикий кэш каких-нибудь файлов стилей
псевдо удобнее делать от sentence, а не от спана...
background: url("/img/icons/check-mark.svg") no-repeat border-box;background: url("/img/icons/check-mark.svg") no-repeat;no-repeat тоже ничего не дало.подключите шнурком к компу и проинспектируйте в девтулзахвот это я оставлю на десерт, никогда такое ещё не делал.
background-clip. Я сделал даже поиск по своим css-файлам, не нашёл такого кода. Как у Вас появился вопрос про background-clip ?3. Переписываем свойство bg нормально. Либо всё в краткое свойство либо всё по частямИ вот эту цитату я не понял. Вот так будет плохо?
.sentence__text:before {
width: 3.25em;
height: 3.25em;
min-width: 3.25em;
margin-right: 0.625rem;
content: "";
background: url("/img/icons/check-mark.svg") no-repeat;
background-size: 100% 100%;
}
background: url("/img/icons/check-mark.svg") no-repeat border-box;<span class="sentence-icon"> , сделаю иконку псевдо-элементом before для <span class="sentence-text"> и изменю параметры высоты и ширины с rem на em . Посмотрю , как R11 на это отреагирует .<div class="sentences">
<div class="sentence"><span class="sentence-icon sentence-icona"></span><span class="sentence-text">Мы приедем к Вам очень скоро, только ждите</span></div>
<div class="sentence"><span class="sentence-icon sentence-icona"></span><span class="sentence-text">Мы всё сделаем быстро в Вашем присутствии </span></div>
<div class="sentence"><span class="sentence-icon sentence-icona"></span><span class="sentence-text">Мы умнее Вас в восемьдесят пять и более раз</span></div>
<div class="sentence"><span class="sentence-icon sentence-icona"></span><span class="sentence-text">Мы гарантируем, что Вы кайфанёте или сломаете голову</span></div>
</div>.sentence-icon {
font-family: "Font Awesome 6 Free";
font-weight: 900;
line-height: 1.1;
vertical-align: middle;
width: 4.25rem;
height: 4.25rem;
min-width: 4.25rem;
margin-right: 0.625rem;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.sentence-icona {
background-image: url("/img/check-mark.svg");
}
Попробовал - ничего хорошего не произошло.
______________________________________________________________________
Внимание, теперь поинтереснее.
Изначально было:
Вы бы уменьшили кружочки, мы уменьшили их для Вас так.
И вот так как я за трое суток много чего перепробовал, дошёл наконец до этого.
Блок с иконками, который с классом sentences, теперь отображается там, где надо и хотя бы он больше не ломается, нормально выглядит во всех браузерах на всех мобильных устройствах, даже на Realme 11 Pro+.
Но так как у нас до сих пор подтягивается злополучным стилем , то поломка дизайна страницы на Realme 11 Pro+ ещё остаётся. Только поломанным теперь остаётся лишь вот этот блок.
Нет слов. Теперь буду смотреть мобильные стили этого блока.
Но всё равно по прежнему парадокс, что ни один блок не ломается даже на Realme 11 Pro+ , если не применяем этот стиль