Reputation: 133
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:
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
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
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