text margins problem on mobile phone

[jessie06]

I have a bit of an issue with a site. It looks fine on desktop, laptop and iPad and is also pretty good on mobile apart from one niggling issue. The text for many pages was right up to the edges of the screen. This was making things difficult to read.

I used a bit of css as follows:

Code:

@media only screen and (max-width: 600px) {
  p {
    width: 90%;
    margin: 0 auto;
}
}

That worked fine until you switch the phone to landscape mode and then the text was back to the edges again.
I know something needs to be either changed in the css or added but not sure what?

Can anyone suggest a solution?
Thanks.

[farhana]

Hi,
You might try adding some padding into that. Even a little may nudge it out where you want without blowing out other screen widths.

Code:

padding: 0 2px;