Piani

[Solved] This was a cashing problem and the page now show up as expected.

Thanks again for a great plugin!

I used this code from a custom Twenty Twelve site. Its solved the design issue with removing the boarders in Techism theme as I wanted. I added this code to my techism-child theme style.css.

.entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image {
    border-radius: none !important;
    box-shadow: none !important;
}

I see the logo is fully responisible at http://www.themesandco.com/customizr/ so this thread can be set as solved.

Im looking forward to the new version. Keep up the good work!

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.

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;
}
}

I found the problem 🙂 In the media library I need to add them in the field “Uploaded to” and connect them to the page I wanted them to show on.

Works perfectly. I use these settings. Thanks again!

@media (max-width: 300px) { /*** Change 400 to the screen width you want ***/
.cycloneslider-template-default .cycloneslider-caption-title{
font-size: 8px; /*** Change font size to what you want ***/
padding: 3px 10px 3px 10px;
}
.cycloneslider-template-default .cycloneslider-caption-description{
font-size: 6px; /*** Change font size to what you want ***/
padding: 0 10px 3px 10px;
}
}