javascript - Auto Adjust DIV content in browser - Rescale if it's necessary -


i need show lot of items, div class='box', in browser. auto adjust number of elements according width of windows browser. these elements rescale if it's necessary.

the width of elements it's same. i'm using bootstrap framework it.

i result:

enter image description here

enter image description here

according size of browser auto adjust elements , scale.

body{    background-color: #f8f8f8;  }    /*          box principal        */    .box{    margin: 50px;    width: 300px;    height: 300px;    border: 4px solid #004259;    border-radius: 15px;    overflow: hidden;  }    /*          image                */    .img-prod{    width: 100%;    height: 100%;    border-radius: 12px;    align: center;      max-width: 100%;    -moz-transition: 0.3s;    -webkit-transition: 0.3s;    transition: 0.3s;  }    /*          on hover             */    .box:hover{    border: 4px solid #fde1ae;  }    /*  .box:hover .text-link{    color: #fde1ae !important;  }  .box:hover .text-edicio{    color: #fde1ae !important;  }  */    .box:hover .img-prod {    -moz-transform: scale(1.05);    -webkit-transform: scale(1.05);    transform: scale(1.05);  }    /*            box-text             */    .box-text{    position: relative;    width: 100%;    height: 30%;    background: -webkit-linear-gradient( rgba(255,0,0,0), #004259);    background: -o-linear-gradient( rgba(255,0,0,0), #004259);    background: -moz-linear-gradient( rgba(255,0,0,0), #004259);    background: linear-gradient( rgba(255,0,0,0), #004259);    bottom: 45%;    padding-top: 5%;    border-bottom-left-radius: 10px;    border-bottom-right-radius: 10px;  }  .box-text span{     color: #f8f8f8;  }  .text{    position: absolute;    width: 96%;    left: 3%;    bottom: 10%;  }  .text-codi{    font-size: small;  }  .text-descripcio{    font-size: medium;  }  .text-edicio{    color: #99b3bd !important;    font-size: x-small;  }  .text-link{    color: #f8f8f8 !important;  }  .text-link:hover,  .text-link:focus{    text-decoration: none;  }    /*          check card           */    .checkbox {    bottom: 97%;    left: 3%;  }    /*          button card           */    .btn-estat{    border: 0;    border-radius: 10px;    position: relative;    bottom: 300px;    left: 87%;    width: 10%;    background-color: #73cbb0;    color: white;  }
<div class="container">      <div class='row'>  <!-- width 100% of img-grid width -->        <?php        $i = 0;        while ($i < 20){ ?>            <div class='col-md-3'>            <div class="box">              <a class="text-link" href='#'>                  <img class="img-prod" src="http://placeimg.com/440/680/any" />              </a>                <input type="checkbox" class="checkbox" id="check1" />                <button type="submit" class="btn-estat">                  <i class='material-icons' style='font-size: 20px;'>done</i>              </button>                <div class="box-text">                  <span class='text'>                    <span class="text-codi">                        <a class="text-link" href='#'>11111</a>                    </span><br/>                    <span class="text-descripcio">                        <a class="text-link" href='#'>text example</a>                    </span><br />                  </span>              </div>            </div>            </div>        <?php            $i++;        } ?>      </div>  </div>

i know apply fixed number of elements row don't know show elements according size.

i need little bit :)

i use of popular jquery masonry plugins:

https://masonry.desandro.com/

https://isotope.metafizzy.co/

http://salvattore.com/


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more