Responsive columns

Rating

Making fields responsive in a view is easy ... You put the view in unformatted HTML and you make the image field floating. If you want to integrate other fields, you can do this by rewriting the image field.

But there is one problem. The images must be of the same height, otherwise they are hooked. You can solve this by using an image style that induce for all images to have the same size (scaling and cropping). Otherwise, you get something like this:

Screen001712.png

Another solution is to use a ready-made module. Shuffle meets many expectations and the height of the images has not to be equal. ---- You do not necessarily have to filter with Shuflle ---. Just use their CSS and Javacript. This provides a nice presentation of the images, with according animation as the screen resized. However ... With Shuffle you can adjust the column width only in pixels. If you set it at 250 px, then three columns of images will be displayed at a screen width of 900 px. With 600px, there will be two. Each time a multiple of 250 px. The images are not really responsive and you usually have an empty space on the right which is not filled. It is only the number of columns that varies.

We therefore make our own columns and resized images. 

The number of columns is set with @media. Here, four columns ...

Screen001714.png

3 columns, as the screen is narrower.
Screen001715.png

Yep ... 2 columns.


Screen001716.png

Here's what I mean. Again two columns and the screen is narrower . But the breaking point was not reached. The images have been getting smaller here. We have so responsive images combined with a variable column system.


Screen001717.png

CSS. In the view you have not to set any classes ... you just refer to the machine name of your view. (For me, this view-responsive-photo-grid2). You can figure this out with the element inspector of your browser. If you want a space between the columns, set the gap width. If you want a space between the images in the same column, set a top margin on the images.

.view-responsive-photo-grid2{
  line-height: 0;
   
  -webkit-column-count: 5;
  -webkit-column-gap:   0px;
  -moz-column-count:    5;
  -moz-column-gap:      0px;
  column-count:         5;
  column-gap:           0px;  
}

.view-responsive-photo-grid2 img {
  width: 100% !important;
  height: auto !important;
 }
 @media (max-width: 1200px) {
 .view-responsive-photo-grid2 {
  -moz-column-count:    4;
  -webkit-column-count: 4;
  column-count:         4;
  }
}
@media (max-width: 1000px) {
.view-responsive-photo-grid2 {
  -moz-column-count:    3;
  -webkit-column-count: 3;
  column-count:         3;
  }
}
@media (max-width: 800px) {
 .view-responsive-photo-grid2 {
  -moz-column-count:    2;
  -webkit-column-count: 2;
  column-count:         2;
  }
}
@media (max-width: 400px) {
.view-responsive-photo-grid2{
  -moz-column-count:    1;
  -webkit-column-count: 1;
  column-count:         1;
  }
}