Title: Updated responsive settings
Last modified: August 21, 2016

---

# Updated responsive settings

 *  [Piani](https://wordpress.org/support/users/webbmasterpianise/)
 * (@webbmasterpianise)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/updated-responsive-settings/)
 * This is tested in Document-gallery version 1.4.2 and WordPress 3.8 with the new
   wide fullpage theme “Techism”.
 * Do not change any original coding. Just add the following code in the end in 
   the Document-Gallery “style.css” (below /* END WITH DESCRIPTION */ on line 65)
 *     ```
       /* START RESPONSIVE SETTINGS */
       @media (max-width: 1000px) {
       div.document-icon{width: 23%;}
       }
   
       @media (max-width: 800px) {
       div.document-icon{text-align: center;  max-width: 120px;  line-height: 0.8em;   width: 23%;}
       div.document-icon img{max-width: 70px;  max-height: 70px;  border: none;}
       div.document-icon a{ font-size: 1.2em;  line-height: 1.3em;    }
       div.descriptions.document-icon-wrapper div.document-icon{max-width: 100px;  padding: 10;  padding-right: 3px;  float: left;}
       }
   
       @media (max-width: 400px) {
       div.document-icon{text-align: center; max-width:  50px; line-height: 0.8em;  width: 22%;}
       div.document-icon img{max-width: 30px;  max-height: 30px;  border: none;}
       div.document-icon a{font-size: 0.7em;  line-height: 0.8em;}
       div.descriptions.document-icon-wrapper div.document-icon{max-width: 70px;  padding: 0;  padding-right: 1px;  float: left;}
       }
       /* END RESPONSIVE SETTINGS */
       ```
   
 * You may have to adjust some settings for other themes.
 * PS! The “width: 23%” setting is added to prevent the icons to end up with 3 on
   one line and 1 below on smaller monitors.
 * [http://wordpress.org/plugins/document-gallery/](http://wordpress.org/plugins/document-gallery/)

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [Dan Rossiter](https://wordpress.org/support/users/danrossiter/)
 * (@danrossiter)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/updated-responsive-settings/#post-4452957)
 * Thanks, wm.
 * Just so you know, this has not fallen off of my radar. I’ve been holding off 
   on any style changes until the next big release, but prior to that I will work
   on merging in some of your work.
 * With the next release, not all thumbnails will have the same aspect ratio so 
   I will need to figure out how best to make them look good with this new added
   complexity.
 * -Dan
 *  Thread Starter [Piani](https://wordpress.org/support/users/webbmasterpianise/)
 * (@webbmasterpianise)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/updated-responsive-settings/#post-4453130)
 * In the latest version I use these settings in the “Custom CSS”(Enter custom CSS
   styling for use with document galleries.) window on the main tab. No more editing
   PhP files. It also stays there when updating DG. There it is easy to adjust the
   settings for you needs.
 *     ```
       /* START RESPONSIVE SETTINGS */
       @media (max-width: 1000px) {
       div.document-icon{width: 23%;}
       }
   
       @media (max-width: 800px) {
       div.document-icon{text-align: center;  max-width: 120px;  line-height: 0.8em;   width: 23%;}
       div.document-icon img{max-width: 70px;  max-height: 70px;  border: none;}
       div.document-icon a{ font-size: 1.2em;  line-height: 1.3em;    }
       div.descriptions.document-icon-wrapper div.document-icon{max-width: 100px;  padding: 10;  padding-right: 3px;  float: left;}
       }
   
       @media (max-width: 400px) {
       div.document-icon{text-align: center; max-width:  50px; line-height: 0.8em;  width: 22%;}
       div.document-icon img{max-width: 30px;  max-height: 30px;  border: none;}
       div.document-icon a{font-size: 0.7em;  line-height: 0.8em;}
       div.descriptions.document-icon-wrapper div.document-icon{max-width: 70px;  padding: 0;  padding-right: 1px;  float: left;}
       }
       /* END RESPONSIVE SETTINGS */
       ```
   
 *  Plugin Author [Dan Rossiter](https://wordpress.org/support/users/danrossiter/)
 * (@danrossiter)
 * [12 years, 2 months ago](https://wordpress.org/support/topic/updated-responsive-settings/#post-4453131)
 * Thanks again, wm!
 * I do still plan to move this into the core CSS file, but hopefully the new CSS
   setup will make this easier to handle in the meantime.
 * -Dan

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Updated responsive settings’ 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/)

## Tags

 * [gallery](https://wordpress.org/support/topic-tag/gallery/)

 * 3 replies
 * 2 participants
 * Last reply from: [Dan Rossiter](https://wordpress.org/support/users/danrossiter/)
 * Last activity: [12 years, 2 months ago](https://wordpress.org/support/topic/updated-responsive-settings/#post-4453131)
 * Status: not a support question