RESPONSIVE ???

The Custom CSS textbox is very helpful, though I’ll add another tip:

Since the inline element width styling (based on number of columns) normally takes priority and cannot be removed, you would need to add !important just before the semicolon in the custom CSS declaration.

Example:

@media screen and (max-width: 480px) {
.document-gallery .document-icon {
  width: 99%!important;
}
}

I just Googled it and it worked for me, though I have not tested it extensively. In effect, this makes a single column for mobile devices. If you wanted to create another breakpoint for tablets, simply create another rule for 768px and declare its width, perhaps 32% (which would be 3 columns). Unfortunately, documents are created in rows and cannot break out of the row when making responsive. Say you want 4 columns for desktop and 3 columns for tablets, and have provided custom CSS to make that happen. Tablet users see the first 3 documents in the top row, then below that the remaining (4th) document that “wrapped” around to the next line. The 5th document doesn’t follow after the 4th, but rather on the next line, since it has been placed in a new row based on number of columns in settings.

A great enhancement to this plugin would be to improve responsiveness, so that documents are not stuck in their rows with a pre-determined number of columns.

Thats great! Thanks!

I chose 6 columns of thumbnails for my layout, and 150×194 px thumbnails (a4 aspect ratio). With some additional styling, it looks fantastic in the divi theme I use. Sharing here for anyone who care:

/* document gallery - some left margin in desktop mode*/
@media screen and (min-width: 768px) {
  .document-gallery .document-icon-row {
    margin-left: 3%;
  }
}

/* document gallery - 3 columns in tablet portrait mode*/
@media screen and (max-width: 768px) {
  .document-gallery .document-icon {
    width: 32%!important;
  }
}

/* document gallery - 2 columns in phone portrait mode*/
@media screen and (max-width: 480px) {
  .document-gallery .document-icon {
    width: 49%!important;
  }
}

/* document gallery - larger thumbnail and shadow*/
.document-gallery .document-icon img {
  width: 80%;
  max-width: 80%;
  box-shadow: 5px 5px 20px -5px rgba(0,0,0,0.5);
  margin-top:5px;
  margin-bottom: 5px;
}

/* document gallery - document text size and color */
.document-gallery .document-icon a {
  font-size: 1em;
  line-height: 1.2em;
  color: black;
}