How to prevent specific text/div from becoming "mobilized?"

I have a list of <li>s that are being squished together when viewed on a mobile device. How do I make it so that these don't become indented and mobile friendly?

For example,

When viewing a wordpress site, the <p> text becomes paragraphed to be viewed on a mobile phone... This is fine but I don't want this applied to the <li> tags on the page.

Via CSS, using min-width property.

Note: I'm assuming you aren't using a fixed width already, via the width property.

You 'll want to use css3 media queries. This way, you can specify your own style for small size screens for the li (different that the normal one for the big screens and overriding the default that happens from the "mobilization"). Here 's a tutorial to get you started: http://line25.com/tutorials/create-a-responsive-web-design-with-media-queries

If it's a WordPress site there are a number of good plugins that can detect a mobile browser and allow you to setup which content they see and how it should be formatted.