Alle Artikel werden als Sold Out dargestellt

Versuche es mal mit

Code:

.ribbons > .ribbon-special {
    border-radius: 30px;
    height: 40px;
}

Die Werte musst Du noch ein bisschen anpassen, ist jetzt nur grob rund

 

Hat bislang super funktioniert. Man sieht sich ja irgendwann mal satt. Ich habe jedoch noch das Problem das auf dem Rechner des Kollegen das "sold out" groß ist. Bei mir Ist auch das NEU groß und sold out klein. Bekomme ich alle Ribbons klein bis auf das Prozente Ribbon?
Ein Screenshot hab ich hier hinterlegt. Mein Code sieht wie folgt aus:

Code:

.ribbons > .ribbon-special{
    border-radius: 20px;
    height: 40px;
  -moz-transform: rotate(20deg);
-ms-transform: rotate(20deg);
-o-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
box-shadow: 0px 2px 5px grey;
font-size: 11pt;
}

 

Wenn 2 oder mehr Ribbon nebeneinander sind, werden alle in der Höhe an das Höchste angepasst.

 

Ok das erklärt alles. Eine letzte Frage hätte ich noch
An welcher Stellschraube muss ich drehen damit die Ribbons wie hier in der Preisbox nicht in die Quere kommen?

 

Code:

.product-info-details .ribbons {
    top: -8px;
}

damit rutschen die nach oben.