Title: Responsive – increase thumbnail size
Last modified: August 22, 2016

---

# Responsive – increase thumbnail size

 *  Resolved [Mikey B](https://wordpress.org/support/users/mikebackhouse/)
 * (@mikebackhouse)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/responsive-increase-thumbnail-size/)
 * Hi, I’m trying to increase the thumbnail size to 200px x 200px on monitors, then
   resize responsively on mobiles and tablets. I’ve tried various combinations of
   these 2 snippets of CSS suggested by yourself, but no joy yet! What am I doing
   wrong?
 *     ```
       /*INCREASE TO 200PX*/
       div.document-icon img {
         max-width: 200px !important;
         max-height: 200px !important;
       }
       div.descriptions.document-icon img {
         max-width: 200px !important;
         max-height: 200px !important;
       }
   
       /*RESPONSIVE STUFF:*/
   
       @media (max-width: 1000px) {
       div.document-icon{width: 23%;}
       }
   
       @media (max-width: 880px) {
       div.document-icon{text-align: center;  max-width: 200px;  line-height: 0.8em;   width: 23%;}
       div.document-icon img{max-width: 200px;  max-height: 200px;  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;}
       }
       ```
   
 * When adding the above exactly like that, the thumbnails are not responsive. When
   adding just the responsive CSS, the thumbnails are too small on standard monitors??
   
   [https://wordpress.org/plugins/document-gallery/](https://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)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/responsive-increase-thumbnail-size/#post-5647925)
 * Hi Mikey,
 * I’ll preface this by saying that CSS is definitely not my strong suit. The CSS
   you saw pinned to the top of the support forum was actually from a user who volunteered
   their enhancements to the default CSS. I had nothing to do with it, but it was
   a great option so I pinned it so others could find it.
 * All of that said, I think I may have a solution for you. You may want to play
   with it some, but this is what I was trying that seemed to achieve what you were
   looking for:
 *     ```
       /* START RESPONSIVE SETTINGS */
       @media (max-width: 1000px) {
       div.document-icon{width: 23%;}
       }
   
       @media (min-width: 800px) {
       div.document-icon{text-align: center;  max-width: 200px;  line-height: 0.8em;   width: 23%;}
       div.document-icon img{max-width: 200px;  max-height: 200px;  border: none;}
       div.document-icon a{ font-size: 1.2em;  line-height: 1.3em;    }
       div.descriptions.document-icon-wrapper div.document-icon{max-width: 200px;  padding: 10;  padding-right: 3px;  float: left;}
       }
   
       @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 */
       ```
   
 * Let me know how that works for you!
 * -Dan
 * PS: If you’ve found this plugin useful, please take a moment to [rate it](http://wordpress.org/support/view/plugin-reviews/document-gallery#postform).
   Thanks! 🙂
 *  Thread Starter [Mikey B](https://wordpress.org/support/users/mikebackhouse/)
 * (@mikebackhouse)
 * [11 years, 5 months ago](https://wordpress.org/support/topic/responsive-increase-thumbnail-size/#post-5647991)
 * Hi Dan, You are a legend! 🙂 Thank you sir, that worked perfectly.
 * I was JUST about to write “unfortunately that didn’t work” when I realised I 
   was adding it to my themes custom css file, not the plugins css box.
 * This is one of those many plugins I’ve found over the years that make me think
   why isn’t this integrated into WordPress as standard?
 * Awesome!
 *  Plugin Author [Dan Rossiter](https://wordpress.org/support/users/danrossiter/)
 * (@danrossiter)
 * [11 years, 4 months ago](https://wordpress.org/support/topic/responsive-increase-thumbnail-size/#post-5648006)
 * Haha! Thanks, Mikey!
 * Glad everything worked out!
 * -Dan

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

The topic ‘Responsive – increase thumbnail size’ 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/)

 * 3 replies
 * 2 participants
 * Last reply from: [Dan Rossiter](https://wordpress.org/support/users/danrossiter/)
 * Last activity: [11 years, 4 months ago](https://wordpress.org/support/topic/responsive-increase-thumbnail-size/#post-5648006)
 * Status: resolved