I have added custom CSS to style.css file on my own custom skin in Wordpress 3.9.2. All classes seem to be working fine, apart from the new ones that I have added.
.frontpage_tile {
width: 270px;
float: left;
min-height: 1px;
margin-left: 30px;
}
.block {
display: block;
position: relative;
}
.block img {
display: block;
border: 1px solid rgba(53, 53, 53, 0.65);
box-sizing: border-box;
border-radius: 3px;
}
.block .caption {
font-size: 13px;
font-weight: normal;
line-height: 1.2em;
padding: 10px;
margin: 0px;
position: absolute;
bottom: 1px;
left: 1px;
right: 1px;
color: #FFF;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.6);
text-shadow: 0px 0px 20px #000, 0px 0px 10px #000;
z-index: 1;
}
The above code is just ignored by all browsers. It does not appear on the page, nor on "Inspect Element" in the browser. Any ideas? This is the code I am using on the template, which I am calling on the custom page.
<div class="frontpage_tile">
<a class="block" href="<?php echo get_permalink(); ?>" data-icon="">
<?php the_post_thumbnail('home-thumb'); ?>
<span class="caption">
<?php the_title(); ?>
</span>
</a>
</div>