Текст в теге ‹p› выходит за пределы левой части экрана на мобильном телефоне

Я пытаюсь заставить этот сайт работать на мобильных устройствах: http://whitehallrow.com/

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

Как я могу это исправить?


mobile text screen css paragraph
person Ben    schedule 13.06.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Полностью удалите ширину из этого кода (я думаю, что это около строки 340 в вашем CSS)

.homeblurb {
   width: 480px; /* <- remove this value */
   float: right;
   padding-right: 16px;
}
person BJack    schedule 13.06.2013
comment
Я убрал все стили из .homeblurb, но он все равно убегает за пределы экрана. У меня Blackberry Bold 9700. - person Ben; 14.06.2013
comment
Хм... Я изменил CSS в своем собственном плагине CSS, но когда я проверяю элемент на странице, он все еще имеет все старые стили... так что, видимо, с плагином что-то не так. - person Ben; 14.06.2013
comment
Используете ли вы сброс CSS какого-либо описания, которое может переопределить ваш стиль? - person BJack; 14.06.2013
comment
Я только что обнаружил проблему, я вырезал и вставил код для домашней страницы в верхнюю часть моего листа CSS для удобства редактирования, но плагин испортил и вместо этого скопировал его, что случалось раньше... так что код дальше down переопределял мои изменения. Виноват. В любом случае спасибо за вашу помощь. :) - person Ben; 14.06.2013

arrow_upward
0
arrow_downward

Потому что у вас есть фиксированный width: 480px на этом p, и есть право заполнения, поэтому текст выходит за пределы экрана. Попробуйте вообще не устанавливать ширину, я проверял в хроме, и это работает.

person Ye Liu    schedule 13.06.2013