CODEWITHSUNDEEP
cssmedia-queries
costumingdiary
costumingdiary

Reputation: 317

Different css style for browser between sizes

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
    }
}

Upvotes: 0

Views: 117

Answers (2)

nikita
nikita

Reputation: 277

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
}

Upvotes: 0

Thiyagesh
Thiyagesh

Reputation: 411

Try this

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

Upvotes: 4

Related Questions