js if number count > x, small font

by mrjordy

HTML

<a href="#" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>Yo this a wicked long title, bro</span></div>
<p>This library contains training for using Change Management Dashbaords.</p></div></a>
<a href="#" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>test</span></div>
<p>This library contains training for using Change Management Dashbaords.</p></div></a>
<a href="#" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>test test</span></div>
<p>This library contains training for using Change Management Dashbaords.</p></div></a>
<a href="#" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>test</span></div>
<p>This library contains training for using Change Management Dashbaords.</p></div></a>

CSS

/*===================== Boxes ====================*/
.ItemSection {
    margin-bottom: 10px;
    font-size: 2em;
    height: 30px;
    font-family:"Trebuchet MS", "sans-serif";
    width: 100%;
    background: #3E628F;
    font-weight: bold;
    color: white;
    text-align: center;
    padding-top: 2px;
    display: block;
    opacity: .95;
    box-shadow: 0px 0px 10px #aaa;
    text-shadow: 1px 1px 1px black;
    border-radius: 4px
}
.ItemBlock {
    font-size: 1.2em;
    border-right: #ccc 1px solid;
    width: calc(25% - 13px);
    vertical-align: middle;
    background: white;
    min-width: 180px;
    border-top: #ccc 1px solid;
    border-bottom: #ccc 1px solid;
    margin: 6px 4px;
    min-height: 180px;
    border-left: #ccc 1px solid;
    display: inline-block;
    opacity: .95;
    box-shadow: 0px 0px 4px #aaa;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    transition: width 0.6s;
}
@media screen and (max-width: 1460px) {
.ItemBlock {
    width: calc(33% - 11px);
}
}
@media screen and (max-width: 1252px) {
.ItemBlock {
    width: calc(50% - 12px);
}
}
.ItemBlock:hover {
    background: rgb(252, 252, 252);
    opacity: .99;
    border: 1px solid #A3C1E7;
    box-shadow: inset 0 0 90px rgba(0, 140, 255, 0.15);
}
.ItemBlock > .ItemTitle {
    height: 36px;
    background: #3E628F;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.ItemBlock > DIV > SPAN {
    font-size: 20px;
    font-family: helvetica;
    color: white;
    text-align: center;
    padding-top: 6px;
    display: block;
}
.ItemBlock > P {
    font-family:"kalinga", "sans-serif";
    font-weight: bold;
    color: black;
    padding-bottom: 0px;
    padding-top: 0px;
    padding-left: 10px;
    padding-right: 10px
}

JavaScript

/*$(".ItemTitle span").text().length )
alert("yay");*/

/*var number = 3
if (number > 2)
alert("test");*/

$(function() {
    $('.ItemTitle span').filter(function() {
        return $(this).text().length > 22 ;
    })
    .css({
        'font-size':'14px',
        'padding-top':'9px'
      });
});