CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
rumar
rumar

Reputation: 133

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

I need to show a lot of items, DIV class='box', in the browser. For that, I would like to auto adjust the number of elements according to the width of the windows browser. These elements also rescale if it's necessary.

The width of the elements it's the same. I'm using the Bootstrap framework for do it.

I would like this result:

enter image description here

enter image description here

According to the size of the browser, auto adjust elements and 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: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 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 would be 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 to apply a fixed number of elements by row but I don't know to do to show the elements according to size.

Upvotes: 1

Views: 74

Answers (3)

kkalamarski
kkalamarski

Reputation: 134

Other solution would be to use flexbox:

.grid {
  display: flex;
  flex-wrap: wrap;
}

.thumbnail {
  flex: 0 0 100px; /* or any other fixed width */
}

Here's very good introduction to flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

EDIT: here's jsfiddle: https://jsfiddle.net/ex017ok1/

Upvotes: 1

Miro
Miro

Reputation: 8660

I would just use any of the popular jquery masonry plugins:

https://masonry.desandro.com/

https://isotope.metafizzy.co/

http://salvattore.com/

Upvotes: 0

Roger Walsh
Roger Walsh

Reputation: 339

As you are using the grid system that's easy!

At present you have given the boxes a class of col-md-3. So you should get 4 columns on desktop. As you are only using one row adding the class col-sm-4 would ensure that you get 3 columns on a tablet. If you want to always show say 4 columns regardless of viewport then try col-xs-3

If you want the space like in the top image then you could create an offset.

row --- col-sm-10 col-offset-sm-1 --- row --- divs with col-xs-3

Upvotes: 0

Related Questions