WordPress.org

Ready to get started?Download WordPress

Forums

Document Gallery
[resolved] Responsive settings (7 posts)

  1. wm
    Member
    Posted 11 months ago #

    I have edited style.css in these options to get the look I like in Twenty Eleven theme.

    div.document-icon{ text-align: center; max-width: 150px;}
    
    div.document-icon img{
    
      max-width: 60px;
    
      max-height: 60px;
    
      border: none;
    
    }
    
    div.document-icon a{
    
      font-size: 0.8em;
    
      line-height: 0.8em;
    
    }

    Anyone know what to edit to make the DG more responsive with maby a

    @media (max-width: 300px)

    tag?

    As DG works now it is 4 fixed columns. And they get very squezed in a smaller monitor. Can the number of columns and the icons and texts get responsive settins?

    http://wordpress.org/plugins/document-gallery/

  2. Dan Rossiter
    Member
    Plugin Author

    Posted 11 months ago #

    I completely agree that DG's CSS could be improved. Right now it looks atrocious on mobile devices.

    This is in my list of projects to work on for the plugin, but at this time I cannot give an estimated time of completion.

    Thanks for your suggestion and I will do my best to get this feature out as soon as possible.

    -Dan

  3. wm
    Member
    Posted 10 months ago #

    I solved this for my design by tweaking the values in style.css and added a @media functon in the end. I think this looks nicer and works nice in responsive themes.

    Feel free to use the code. Compare with the original for details.

    div.document-icon{ text-align: center; max-width: 150px; line-height: 1.0em;}
    
    div.document-icon img{
      max-width: 60px;
      max-height: 60px;
      border: none;
    }
    
    div.document-icon a{
      font-size: 0.8em;
      line-height: 0.8em;
    }
    
    div.document-icon{ margin: 5px 0 0; }
    
    /* WITHOUT DESCRIPTION */
    div.document-icon{
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      /* percents round up in some browsers, making
      only 3 icons fit per line so can't use 25% */
      width: 20%;
    }
    div.document-icon-wrapper{
      width: 100%;
      padding: 10px;
      text-align: left;
    }
    /* END WITHOUT DESCRIPTION */
    
    /* WITH DESCRIPTION */
    div.descriptions.document-icon-wrapper div.document-icon{
      max-width: 115px;
      padding: 0;
      padding-right: 3px;
      float: left;
    }
    
    div.descriptions.document-icon-wrapper{
      vertical-align: middle;
      text-align: inherit;
    }
    
    div.descriptions.document-icon-wrapper img{
      max-width: 65px;
      max-height: 65px;
    }
    
    /* clearfix */
    /* can't depend on theme having a clearfix class,
    so build it into dg css */
    div.descriptions.document-icon-wrapper:before,
    div.descriptions.document-icon-wrapper:after{
      content: "";
      display: table;
    }
    
    div.descriptions.document-icon-wrapper:after{
        clear: both;
    }
    div.descriptions.document-icon-wrapper{
        zoom: 1; /* For IE 6/7 (trigger hasLayout) */
    }
    /* END WITH DESCRIPTION */
    
    @media (max-width: 400px) { /*** Change 400 to the screen width you want ***/
    div.document-icon{ text-align: center; max-width: 50px; line-height: 0.8em;}
    
    div.document-icon img{
      max-width: 30px;
      max-height: 30px;
      border: none;
    }
    
    div.document-icon a{
      font-size: 0.6em;
      line-height: 0.6em;
    }
    }
  4. Dan Rossiter
    Member
    Plugin Author

    Posted 10 months ago #

    Thanks for the work you put into this, wm. I'll do some testing and if everything seems to work well, I'll include your modifications in the next release (and of course, credit you).

    All the best!
    -Dan

  5. wm
    Member
    Posted 10 months ago #

    Small tweaks of fonts to look better when using in "twent twelve" theme.

    div.document-icon{ text-align: center; max-width: 120px; line-height: 1.1em;}
    
    div.document-icon img{
      max-width: 60px;
      max-height: 60px;
      border: none;
    }
    
    div.document-icon a{
      font-size: 1.0em;
      line-height: 1.0em;
    }
    
    div.document-icon{ margin: 5px 0 0; }
    
    /* WITHOUT DESCRIPTION */
    div.document-icon{
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      /* percents round up in some browsers, making
      only 3 icons fit per line so can't use 25% */
      width: 20%;
    }
    div.document-icon-wrapper{
      width: 100%;
      padding: 10px;
      text-align: left;
    }
    /* END WITHOUT DESCRIPTION */
    
    /* WITH DESCRIPTION */
    div.descriptions.document-icon-wrapper div.document-icon{
      max-width: 100px;
      padding: 0;
      padding-right: 3px;
      float: left;
    }
    
    div.descriptions.document-icon-wrapper{
      vertical-align: middle;
      text-align: inherit;
    }
    
    div.descriptions.document-icon-wrapper img{
      max-width: 65px;
      max-height: 65px;
    }
    
    /* clearfix */
    /* can't depend on theme having a clearfix class,
    so build it into dg css */
    div.descriptions.document-icon-wrapper:before,
    div.descriptions.document-icon-wrapper:after{
      content: "";
      display: table;
    }
    
    div.descriptions.document-icon-wrapper:after{
        clear: both;
    }
    div.descriptions.document-icon-wrapper{
        zoom: 1; /* For IE 6/7 (trigger hasLayout) */
    }
    /* END WITH DESCRIPTION */
    
    @media (max-width: 400px) { /*** Change 400 to the screen width you want ***/
    div.document-icon{ text-align: center; max-width: 50px; line-height: 0.8em;}
    
    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;
    }
    }
  6. Dan Rossiter
    Member
    Plugin Author

    Posted 10 months ago #

    Finally got a chance to test this and for the most part it looks great. Looks much, MUCH better on smartphone screens. The only part I don't love are the twenty twelve tweaks in your second version.

    I'm running a modified twenty twelve and the icons look tiny on a full-size monitor. Can you show me examples of the issues you were trying to resolve with the tweaks? You could be onto something, but I'm not seeing it off the bat.

    -Dan

  7. wm
    Member
    Posted 10 months ago #

    I am testing this with try'n'error so the result is probably various of theme to theme and what google fonts the theme is set to and your device. The first code I was using on a "twenty eleven" theme.

    The lines that is interresting is first of all the display of the orĂ­ginal theme in the first part.

    div.document-icon{ text-align: center; max-width: 120px; line-height: 1.1em;}
    
    div.document-icon img{
      max-width: 60px;
      max-height: 60px;
      border: none;
    }
    
    div.document-icon a{
      font-size: 1.0em;
      line-height: 1.0em;
    }
    
    div.document-icon{ margin: 5px 0 0; }
    
    /* WITHOUT DESCRIPTION */
    div.document-icon{
      display: inline-block;
      vertical-align: top;
      overflow: hidden;
      /* percents round up in some browsers, making
      only 3 icons fit per line so can't use 25% */
      width: 20%;
    }

    width: 20%; did a nice change to the icons and the other settings in that part just worked fine for me. Adding "line-height: 1.0em; " also helped the final look I think.

    In the last part I like to make it small for mobile smartphones.

    @media (max-width: 400px) { /*** Change 400 to the screen width you want ***/
    div.document-icon{ text-align: center; max-width: 50px; line-height: 0.8em;}
    
    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;
    }
    }

    You can of course change all these values to you likeings.

    Or/and you can make a copy of this and change the width for surf-pads...Like ad a similar section above...

    @media (max-width: 600px) { /*** Change 400 to the screen width you want ***/
    div.document-icon{ text-align: center; max-width: 80px; line-height: 1.0em;}
    
    div.document-icon img{
      max-width: 40px;
      max-height: 40px;
      border: none;
    }
    
    div.document-icon a{
      font-size: 1.0em;
      line-height: 1.1em;
    }
    div.descriptions.document-icon-wrapper div.document-icon{
      max-width: 90px;
      padding: 0;
      padding-right: 1px;
      float: left;
    }
    }

    If u have 2 steps of responsive handeling it will look even better. But as I said, the code I provided above works great for me. (just tested on 1 site) Feel free to adjust the settings to your theme. The responsive handeling, as I know, is important to change to google font use with the "em" setting instead of "px" (pixels) and use "changes" with one or several steps of code with "@media (max-width: ???px)"

    I do not know how to implement this to a dynamic addon settings with choises or to let the user change the settings in the child theme. I just changed to look nice on mu site. Probably aloth of diffrent settings and if the main theme is working with google fonts or not.

Reply

You must log in to post.

About this Plugin

About this Topic