Title: RESPONSIVE ??? Last modified: August 31, 2016 --- # RESPONSIVE ??? * Resolved [giuliosensi](https://wordpress.org/support/users/giuliosensi/) * (@giuliosensi) * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-281/) * Hello , thumb seems not responsive…. I actually set a 4 columns layout, but it looks weird on mobiles and small screens !!! * Any idea ?? * [https://wordpress.org/plugins/document-gallery/](https://wordpress.org/plugins/document-gallery/) Viewing 10 replies - 1 through 10 (of 10 total) * Plugin Author [Dan Rossiter](https://wordpress.org/support/users/danrossiter/) * (@danrossiter) * [10 years, 4 months ago](https://wordpress.org/support/topic/responsive-281/#post-6961408) * Hi giuliosensi, * The DG layout is already responsive to a degree. If you want to further customize output styling to match your layout you can always include custom styling in the “Custom CSS” textbox under `Dashboard -> Settings -> Document Gallery`. * -Dan * [Jason](https://wordpress.org/support/users/jj9617/) * (@jj9617) * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-281/#post-6961668) * 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. * Thread Starter [giuliosensi](https://wordpress.org/support/users/giuliosensi/) * (@giuliosensi) * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-281/#post-6961669) * Thanks for your support guys !!! * Ciao ! * Giulio * Thread Starter [giuliosensi](https://wordpress.org/support/users/giuliosensi/) * (@giuliosensi) * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-281/#post-6961670) * Confirm * ``` @media screen and (max-width: 480px) { .document-gallery .document-icon { width: 99%!important; } } @media screen and (max-width: 768px) { .document-gallery .document-icon { width: 32%!important; } } ``` * works good for tablet and mobile !! * Two thumbs up !! * Thread Starter [giuliosensi](https://wordpress.org/support/users/giuliosensi/) * (@giuliosensi) * [10 years, 3 months ago](https://wordpress.org/support/topic/responsive-281/#post-6961671) * Well to be more precise… * ``` @media screen and (max-width: 768px) { .document-gallery .document-icon { width: 32%!important; } } @media screen and (max-width: 480px) { .document-gallery .document-icon { width: 99%!important; } } ``` * Works better… * [Bjarne Oldrup](https://wordpress.org/support/users/oldrup/) * (@oldrup) * [10 years, 1 month ago](https://wordpress.org/support/topic/responsive-281/#post-6961711) * 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; } ``` * [bheadrick](https://wordpress.org/support/users/bheadrick/) * (@bheadrick) * [10 years ago](https://wordpress.org/support/topic/responsive-281/#post-6961720) * having to add !important is dumb. * The plugin should just not have inline styling. * use classes * Plugin Author [Dan Rossiter](https://wordpress.org/support/users/danrossiter/) * (@danrossiter) * [10 years ago](https://wordpress.org/support/topic/responsive-281/#post-6961723) * bheadrick, * How exactly do you propose doing that with custom styles configured by users? The native DG styles are in a css file. * -Dan * [bheadrick](https://wordpress.org/support/users/bheadrick/) * (@bheadrick) * [10 years ago](https://wordpress.org/support/topic/responsive-281/#post-6961724) * Thanks for the quick response. * It’s not that difficult * native dg styles: * .document-gallery .document-icon.4col{width:24%} .document-gallery .document- icon.3col{width:30%} etc… * then set the appropriate class based on the selection in the shortcode rather than the inline style, so it can be overridden without the !important * Plugin Author [Dan Rossiter](https://wordpress.org/support/users/danrossiter/) * (@danrossiter) * [10 years ago](https://wordpress.org/support/topic/responsive-281/#post-6961725) * That requires limiting the number of columns, which we very intentionally did not do. Also, the `!important` is generally not a result of the small portion of dynamic code generated by DG, but rather the fact that the DG style file is loaded after the manual user code. That order is an artifact of how WP behaves in older versions. There is a way in newer versions (as in, earlier this year) that would allow us to fix that ordering, but it’s not at the top of our list given there is a reasonable workaround. * -Dan Viewing 10 replies - 1 through 10 (of 10 total) The topic ‘RESPONSIVE ???’ is closed to new replies. * ![](https://ps.w.org/document-gallery/assets/icon.svg?rev=983329) * [Document Gallery](https://wordpress.org/plugins/document-gallery/) * [Frequently Asked Questions](https://wordpress.org/plugins/document-gallery/#faq) * [Support Threads](https://wordpress.org/support/plugin/document-gallery/) * [Active Topics](https://wordpress.org/support/plugin/document-gallery/active/) * [Unresolved Topics](https://wordpress.org/support/plugin/document-gallery/unresolved/) * [Reviews](https://wordpress.org/support/plugin/document-gallery/reviews/) * 10 replies * 5 participants * Last reply from: [Dan Rossiter](https://wordpress.org/support/users/danrossiter/) * Last activity: [10 years ago](https://wordpress.org/support/topic/responsive-281/#post-6961725) * Status: resolved