Ben
Ben

Reputation: 139

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

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?

Upvotes: 1

Views: 4700

Answers (2)

BJack
BJack

Reputation: 2534

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;
}

Upvotes: 1

Ye Liu
Ye Liu

Reputation: 8976

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.

Upvotes: 0

Related Questions