.thumbnail{
width: 100%;
}
.thumbdiv{
margin: 20px 0;
padding: 0 10px;
}
#portfolio{
height: auto;
display: inline-block;
}
#about{
height: 250px;
background: #303746;
}
/* Again, you’re free to use and define the classes: */
.column { float: left; }
.size-1of1 { width: 100%; }
.size-1of2 { width: 50%; }
.size-1of3 { width: 33.333%; }
.size-1of4 { width: 25%; }
/* These are the classes that are going to be applied: */
.column { float: left; }
.size-1of3 { width: 33.333%; }
#grid[data-columns]::before {
display: none;
content: '3 .column.size-1of3';
}
@media screen and (max-width: 767px){
#grid[data-columns]::before {
content: '1 .column.size-1of1';
}
}
@media screen and (min-width: 768px) and (max-width:991px) {
#grid[data-columns]::before {
content: '2 .column.size-1of2';
}
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
#grid[data-columns]::before {
content: '3 .column.size-1of3';
}
}
@media screen and (min-width: 1200px){
#grid[data-columns]::before {
content: '4 .column.size-1of4';
}
}