text out of line when viewing site from mobile

Question

I recently whipped this site up for one of my first clients. At present i cant seem to find the reason that the text under each heading is slightly to the left when browsing from a mobile device. (using galaxy nexus)

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

Everything else on the page displays perfectly and ive been trying to identify the problem with no success

I would like the text under the maroon headings to display in its full width which is 60% of the total wrapping container, the text should also be centered reletive to the maroon line like it does on a normal screen size as each .info tag has been given a margin:0 auto; property

Any help would be appreciated even though its not a fatal error for the design, Cheers

Answer 1

I'm quite certain that this behavior is by design. Though chrome on my nexus does a much better job than the stock browser.

A possible solution would be to provide different CSS rules for different screen sizes, like

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

and with that limit the widths of elements that would otherwise force the page to render wider than the usual mobile phone screen width (in portrait orientation)

Another option would be to use a CSS framework with linearization support like YAML and rebuild the design. Or probably a combination of both since the image would need special care anyway.

Also keep in mind that due to the small form factor of mobile devices, large margins should be avoided.

Answer 2

Try giving the Paragraph {text-align: justify;} and see if it helps reduce the right spacing issue in mobile browser.