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

Popular posts from this blog

python - pip install -U PySide error -

arrays - C++ error: a brace-enclosed initializer is not allowed here before ‘{’ token -

cytoscape.js - How to add nodes to Dagre layout with Cytoscape -