Wordpress reads certain styles only on narrow screens - html

Question

Got another question open on this problem, but I'll make it more specific here, and may be if I get a right solution here, it will help to fix the rest.
Live link here
http://soloveich.com/pr6/blog/
So, I have a background div for date. For some reason, it only displays correctly on narrow screens, and styling of it doesn't even show in source code on wider ones. The styling is there. Checked it in wp admin panel theme editor.
html
<div class="date3">
<div class="datetxt">
<div class="month"><?php the_time('M ') ?></div>
<div class="day"><?php the_time('j ') ?></div>
</div></div>
css
.date3 {
width:100px;
height: 100px;
border: 2px solid transparent;
border-radius: 100px;
background-color: #7E7E7E;
color: #fff;
text-align: center;
}
#media screen and (max-width: 530px) {
.date3 {
width:100px;
height: 100px;
border-radius: 60px;
}
}
.month {
text-align: center;
margin-top: 12px;
text-transform: uppercase;
font-size: 24px;
font-weight: 200;
font-family: 'Exo 2', sans-serif;
}
.day {
text-align: center;
margin-top: -8px;
text-transform: uppercase;
font-size: 40px;
font-family: 'Exo 2', sans-serif;
}
Also, tried to cheat and set up mediaquery for larger resolution. No luck.
p.s.
all of that started happening after posting a youtube video with post breaker in text

Answer 1

The css for .date3 only exists in media queries that's why it works on lower resolution screens. Try putting it above all the media queries. Should work