WordPress.org

Ready to get started?Download WordPress

Forums

Document Gallery
Updated responsive settings (4 posts)

  1. wm
    Member
    Posted 8 months ago #

    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/

  2. Dan Rossiter
    Member
    Plugin Author

    Posted 8 months ago #

    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

  3. wm
    Member
    Posted 5 months ago #

    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 */
  4. Dan Rossiter
    Member
    Plugin Author

    Posted 5 months ago #

    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

Reply

You must log in to post.

About this Plugin

About this Topic