Different css style for browser between sizes - css

Question

I have a stylesheet for when #media screen and (max-width:639px)
When it is above 639px, it refers to my default CSS code which is what I want. But there are two elements I want to hide when the screen is below 667px.
In other words, when the screen is between 639px and 667px, I want the default CSS to show with two elements removed from it using .class{display:none}.
I tried min-width:666px, max-width:667px and several other variations but I can't get it to work.
Here's my blog:
Here's my css file: Link
body {
background-color:#CEDEAF;
color:#111530;
font-size:16px;
overflow-y:scroll;
margin:auto;
font-family:'Noto Sans', Arial, sans-serif;
line-height:2;
letter-spacing:1px
}
img, iframe {
border:none;
max-height:100%;
max-width:100%;
display:inline-block;
vertical-align:top;
padding:.75%
}
header {
text-align:center
}
a {
text-decoration:none;
color:#C33125
}
a:hover {
text-decoration:none;
color:#111530
}
h1, footer a {
color:#111530
}
footer a:hover {
color:#C33125
}
a:hover img {
opacity:.8
}
hr {
border:none;
height:1px;
background-color:#ddd
}
header img {
position:relative;
padding:0;
margin:auto;
nopin:nopin
}
.follow {
position:absolute;
top:.5%;
right:0;
margin-right:3%
}
#main {
margin:0 auto;
background-color:#fff;
width:95%
}
#Blog1 {
padding:1%
}
h1 {
margin:0;
font-size:1.3em;
text-transform:uppercase;
text-align:center;
margin-bottom:1%
}
.homelist {
text-align:center;
margin-top:-.75%
}
.homelist img {
width:30%
}
.left img {
float:left;
margin-right:20px
}
.center, .videopost, .breadcrumb, footer {
display:block;
text-align:center
}
.videopost img {
width:1px;
position:absolute
}
ul {
list-style-position:inside
}
.staticpagelist ul, .imagetextlist ul {
margin-left:-40px
}
.staticpagelist ul li, .imagetextlist ul li {
display:inline-block;
text-decoration:none;
padding:1.5%;
text-align:center;
vertical-align:top;
font-size:.8em;
width:30%
}
.staticpagelist ul li {
font-size:.85em;
font-weight:700
}
.sub {
margin:1% auto;
font-weight:700;
text-transform:uppercase;
padding:.75%;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd
}
.hcard, .hcard a {
color:#aaa
}
.hcard, footer {
font-size:.7em;
font-weight:700
}
.breadcrumb {
font-size:.8em
}
.menu {
text-align:center;
font-weight:700;
padding-bottom:.5%
}
.related-posts-widget ul {
height:250px;
overflow:hidden
}
.related-posts-widget ul li {
width:13%
}
footer {
margin:1%
}
#media screen and (max-width:639px) {
h1, .sub {
font-size:.9em
}
header img, .homelist img, iframe {
width:90%
}
#main {
width:98%
}
.mobilesquish img, .staticpagelist ul li {
width:47%
}
.breadcrumb {
margin-bottom:2%
}
.follow, .related-posts-widget, .hcard, .remove {
display:none
}
}

Answer 1

Try this
#media screen and (min-width: 639px) and (max-width: 667px) {
//css here display: none
}

Answer 2

use following code
#media screen and (min-width: 639px) and (max-width: 667px) {
//css here display: none
}
#media screen and (max-width: 639px){
//write Css for screen less than 639px
}