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.
