Assistance with unordered lists

[philip41]

Testing out an idea at http://www.devsite11.co.uk/about-us/areas-we-cover.html i have created a background box, with three lists, the lists when displayed on a P.C are all side by side, this is as expected.
Problem i am having is when it comes to iPad or Iphone, the lists are not scaling down and are getting jumbled up.

I have played around with the %ages all to no avail.

What i would like to happen is, either the lists drop below each other, or the text reduces and stays side by side.

Code for the css:

#featurebox {
background: #ededed;
padding:10px 20px;
border-radius:10px;
overflow: auto;
}

#featurebox .featureleft {width:31%; margin-left:0px;float:left;}
#featurebox .featurecenter {width:31%; margin-right:0px;float:right;}
#featurebox .featureright {width:31%; margin-right:0px;float:right;}

#featurebox ul li {color:#417b65!important;font-weight:bold; font-size:110%!important;margin-bottom: 10px;}

Code for the lists:

<div id="featurebox">
<div class="featureleft">
<ul>
<li>Worthing</li>
<li>Rustington</li>
<li>Littlehampton</li>
<li>Arundel</li>
<li>Bognor</li>
<li>Chichester</li>
<li>Felpham</li>
<li>Yapton</li>
</ul>
</div>
<div class="featurecenter">
<ul>
<li>Brighton</li>
<li>Newhaven</li>
<li>Seaford</li>
<li>Eastbourne</li>
<li>Storrington</li>
<li>Petworth</li>
<li>Horsham</li>
<li>Southwater</li>
</ul>
</div>
<div class="featureright">
<ul>
<li>Crawley</li>
<li>Dorking</li>
<li>East Grinstead</li>
<li>Camberley</li>
<li>Guildford</li>
<li>Woking</li>
<li>Leatherhead</li>
<li>Reigate</li>
</ul>
</div>
</div>

Thank you in advance for any assistance.

 

[TheAlex]

I was going to suggest float: left featurecenter and featureright but it looks like you've already done that - has it fixed it?

 

[philip41]

Hi, yes i have it fixed now.

Thanks for taking a look.