Александр, доброго времени суток!
Ранее я у вас спрашивал как можно исправить этот момент (комментарий от 29.11.2021, 02:13), но перепробовав все, ни чего не помогает, он все равно прыгает... И как решить эту проблему не могу понять. Пишу вам в виду вашего опыта. Может у вас получится разобраться.
Суть проблемы:
1) Прыгает текст, проявляется на мобильном телефоне, при обновлении все приходит в норму.
- Фото как не должно быть. http://itchief.ru/assets/uploadify/a/8/5/a85a0ea1c2d85436317080b8b5ea2e7f.jpg
- Фото как должно быть. http://itchief.ru/assets/uploadify/1/a/b/1ab44bdb76ff4129585136e3eadea0d3.jpg
2) Возникает только на тех страницах, где несколько учебников, как пример:
- Тут.
- И тут.
Иногда загружается норм, но если зайти с поиска то точно увидите данную проблему. Через яндекс пишу "ГДЗ 7 класс решеба" и захожу на страницу. Из 10 заходов только 2 с нормальным отображением шрифта.
На других страницах, где только один учебник, это проблемы нет.( как пример на этой проблем нет).
P.S. 1) Все куки, историю браузера почистил.
2) Все способы из прошлого комментария (моего вопроса ранее) перепробовал, не помогает.
3) В прошлый раз, вы говорили, что у вас все отображается нормально. Я пробовал на "андройдах", так вот если там изначально размер шрифта поставить на самый минимум, то все норм. Но такой размер шрифта мало у кого, если его повысить (Настройки -> Дисплей -> Размер и стиль шрифта) http://itchief.ru/assets/uploadify/9/e/6/9e639c33dffb81991e876a1bb5236002.jpg" как стоит у большинства на середине или чуть выше, то данный недуг проявляется во всей красе. Да, при такой настройке увеличивается весь шрифт, но он увеличивается везде одинаково, а в этом проблемном блоке увеличивается несоизмеримо.
Александр, помогите пожалуйста грамотно разобраться с этой проблемой. Если не затруднит прям, что в коде нужно исправить. Уж очень сильно она меня бесит. Пытался исправить, но все тщетно... Спасибо! =)
Вот фрагмент css отвечающий за отображение этой части:
.col__items {
display: flex;
flex-wrap: wrap;
}
.col__item {
display: flex;
flex: 0 0 100%;
align-items: flex-start;
margin-bottom: 20px;
}
@media screen and (min-width: 620px) {
.col__item{
flex:0 0 50%;
}
}
.col__item p {
color: black;
font-size: 1rem;
}
@media screen and (min-width: 480px) {
.col__item p {
font-size: 1.0786rem;
}
}
.col__item>img {
display: block;
max-width: 100px;
height: auto;
}
.col__item>div {
padding-left: 10px;
}
.col__item span {
font-weight: 600;
color: #2b2b2b;
}
p {
font-size: 15px;
line-height: 1.2;
}
@media screen and (min-width: 480px) {
p {
font-size: 17px;
}
}
.Books_number>p {
text-indent: 9px;
}
И codepen.
Попробуйте установить для всех изображений width и height: