Text in <p> tag overflowing off left side of screen on mobile

Question

I'm trying to get this site working for mobile devices: http://whitehallrow.com/

The text body under the slideshow is working fine on my Blackberry, but all the paragraphs under the blue ribbons are running off the left side of the screen. I've tried many different things with CSS, such as margins, padding, width:100%, float, text-align - and nothing has even changed it slightly.

How can I fix this?

Answer 1

Remove the width entirely from this code (I think its around line 340 in your CSS)

.homeblurb {
   width: 480px; /* <- remove this value */
   float: right;
   padding-right: 16px;
}

Answer 2

Because you have a fixed width: 480px on that p, and there is a padding-right, so the text runs off the screen. Try not to set the width at all, I tested in chrome and it works.