css3 - Responsive design for elements -
how can make element class properties display inline-block
laptops , desktops , list tablets , mobiles?
whenever shrink width of browser, ipad design elements not fit properly.
.properties { display: inline-block; } @media screen , (min-device-width: 1200px) , (max-device-width: 1600px) , (-webkit-min-device-pixel-ratio: 1) { .properties { display: inline-block; } .propertybutton { display: inline-block; } } @media (max-width: 900px) { .properties { display: list-item; list-style-type: none; } .propertybutton { margin-top: -2%; margin-left: 30%; } }
<div class="propertywrapper" style="width:100%;"> <div style="float:right"> <span ng-click="addproperty()" class="button buttonprimary pull-right">add property</span> </div> <div class="properties"> <label>name</label> <input type="text" /> </div> <div class="properties"> <label>name</label> <input type="text" /> </div> <div class="properties"> <label>name</label> <input type="text" /> </div> <div class="properties"> <label> isrequired(te): </label> <input type="checkbox" ng-model="property.tradeearthrequired" name="usedequipmentpropertylist[0].tradeearthrequired" class="ng-pristine ng-valid"> </div> <div class="propertybutton"> <span class="button primaryaction" ng-click="addproperty()">add</span> <span class="button primaryaction" ng-click="removeproperty(property,$index)">delete</span> </div> </div>
sometimes, need duplicate code. keep inline-block view windows sized on 1200. when under 1200, hide , show fresh new list ?
Comments
Post a Comment