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