абзац наложения на смартфон

Question

Я использую шаблон начальной загрузки и получаю абзац наложения только на смартфон (iPhone 6, Safari). Прекрасно работает в браузере, даже сокращая окно браузера до минимального размера для тестирования. Перекрытие происходит после двух строк на телефоне.

В css нет максимальной высоты. Это CSS для пункта:

.about-grid p { 
    padding:0 0 0.5em 0; 
    color: #333; 
    font-size: 1.1em; 
    line-height: 1.4em; 
    font-family: 'Arimo', sans-serif; 
} 

Вы также можете see the full web page online.

Answer 1

подмигнули довольно просто исправить:

на линии 1279 из style.css вы контрольная точка объявили

@media (max-width: 320px) 

и на линии 1391 у вас есть этот класс:

.about-grid p { 
     height: 50px; 
     font-size: 1em; 
    } 

Высота заставляет ваши текстовые блоки быть только 50px высотой, а так как у вас нет «переполнения: скрыто»; текст переполняется и заканчивается перекрытием всего остального. это также происходит, если вы сделаете окно своего браузера действительно маленьким, а не только на смартфонах.

Все, что вам нужно сделать, это удалить декларацию высоты. Если вам это нужно, почему-то просто добавьте новый класс и сделайте его более конкретным.

Надеюсь, это поможет :)