CSS Working for Mobile but not Desktop

Hello,

I made CSS changes to my blog (basically just color and sizing changes) a few weeks ago and they were working but then I just checked my blog and the changes are being carried out on mobile, but not on desktop. Any idea why this would be the case? I only have one outside plugin and I’ve already tried deactivating it and it didn’t make a difference. Thank you!

Site name: calebmclaughlinministries.com
Blog example: http://calebmclaughlinministries.com/mine-familiar-friend-voice-friends/

Here is the code I have:

span.post-date.date {
color: #1f2833;
}
.tagcloud > a {
background-color: #45a29e;
}
.single-post-tags > a {
background-color: #1f2833;
}
hb-dropdown-box share-dropdown-box {color: #1f2833}
.comments-list li.comment>div.comment-body {
color: #1f2833 !important;
}
#respond p.comment-subscription-form label {
color: #1f2833;
}
.like-holder.like-button.like-active {
font-size: 20px;
color: #45a29e !important;
}
.like-holder.like-active i {
color:#45a29e !important;
}
.share-holder {
font-size: 20px !important;
color:#45a29e !important;
}
i.hb-moon-heart-3 {
color:#45a29e !important;
}
i.hb-moon-bubbles-7 {
color:#45a29e !important;
}
.most-liked-list li span{
color:#1f2833 !important;
}
span.text-sep {
color:#1f2833 !important;
}}
@media handheld, only screen and (max-width: 600px){
.author-meta.blog-meta {
display: block !important;
}
.rounded-element, .author-meta.blog-meta {
height: 100px;
width: 100px; }}