Текст вне строки при просмотре сайта с мобильного

Question

Недавно я взломал этот сайт для одного из моих первых клиентов. В настоящее время я не могу найти причину того, что текст под каждым заголовком немного левее при просмотре с мобильного устройства. (с помощью Galaxy Nexus)

http://www.digitalgenesis.com.au/2012-websites/qsoils/example3.html

Все остальное на странице отображается отлично, и я пытался определить проблему безуспешно

Я хотел бы, чтобы текст под заголовками темно-бордового цвета отображался во всю ширину, что составляет 60% от общего контейнера для переноса, текст также должен быть центрирован относительно строки темно-бордового цвета, как на обычном размере экрана, поскольку каждый тег.info имеет дали маржу:0 авто; имущество

Любая помощь будет оценена, хотя это не фатальная ошибка для дизайна, ура

Answer 1

Я совершенно уверен, что это поведение является намеренным. Хотя хром на моем нексусе работает намного лучше, чем на стоковом браузере.

Возможным решением было бы предоставить разные правила CSS для разных размеров экрана, например

@media screen and ( max-width: 480px) {
  #truck img {
    width: 460px;
  }
  .info {
    width: auto;
  }
  /* etc... */
}

и с этим ограничением ширины элементов, которые иначе заставили бы страницу отображаться шире, чем обычная ширина экрана мобильного телефона (в портретной ориентации)

Другой вариант - использовать CSS-фреймворк с поддержкой линеаризации, такой как YAML, и перестроить дизайн. Или, возможно, сочетание того и другого, поскольку изображение все равно будет нуждаться в особом уходе.

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

Answer 2

Попробуйте указать пункт {text-align: justify;} и посмотрите, поможет ли это уменьшить проблему правильного пробела в мобильном браузере.