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.
