lundi 18 janvier 2016

how to make checkbox list responsive?

I have checkbox list with total 28 items.

I want to display 4 items in a row when viewing on Desktop And 1 Item per row in Mobile devices.

How can I achieve this ?

What I have Tried Is as Follows: (But Without success)...

Current Code is :

<style>
input[type="checkbox"].mixed + label { 
margin:5px;
color:#073F4B;
font-size:14px;
width :150px;
}   

@media only screen and ( max-width: 767px) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-resolution: 240dpi)  {
input[type="checkbox"].mixed + label { 
margin:5px;
color:#073F4B;
font-size:14px;
width :90%;
}   

}
</style>

And Display of check box list (showing 8 items for example) :

<input type="checkbox" name="hobbies[]" value="Astrology" class="mixed" <?php if(in_array(Astrology,$my_stored_game)){echo "checked";}?>><label>Astrology</label><br>    
<input type="checkbox" name="hobbies[]" value="Book_Collection" class="mixed" <?php if(in_array(Book_Collection,$my_stored_game)){echo "checked";}?>><label>Book Collection</label><br>
<input type="checkbox" name="hobbies[]" value="Coin_Collection" class="mixed" <?php if(in_array(Coin_Collection,$my_stored_game)){echo "checked";}?>><label>Coin Collection</label><br>
<input type="checkbox" name="hobbies[]" value="Coloring" class="mixed" <?php if(in_array(Coloring,$my_stored_game)){echo "checked";}?>><label>Coloring</label><br>
<input type="checkbox" name="hobbies[]" value="Computer" class="mixed" <?php if(in_array(Computer,$my_stored_game)){echo "checked";}?>><label>Computer</label><br>
<input type="checkbox" name="hobbies[]" value="Cooking" class="mixed" <?php if(in_array(Cooking,$my_stored_game)){echo "checked";}?>><label>Cooking</label><br>
<input type="checkbox" name="hobbies[]" value="Dance" class="mixed" <?php if(in_array(Dance,$my_stored_game)){echo "checked";}?>><label>Dance</label><br>
<input type="checkbox" name="hobbies[]" value="Trecking" class="mixed" <?php if(in_array(Trecking,$my_stored_game)){echo "checked";}?>><label>Trecking</label>

Thanks for suggestions in adavanced




Aucun commentaire:

Enregistrer un commentaire