[FIXED] Media queries with CSS in WordPress

Issue

I am using a theme with wordpress 3.8. I have included some touch effects in my code that I would like to turn off for tablet and phone devices. I've created a new css without hover effects and put it in my main style sheet under:

    @media all and (max-width: 699px) and (min-width: 520px)

However it does not seem to be working. I have seen posts Media Queries CSS along with several other posts on the topic but I cannot get it to work correctly. Any suggestions?

Original CSS:

    .view {

    width: 300px;

    height: 200px;

    margin: 10px;

    float: left;

    border: 10px solid #fff;

    overflow: hidden;

    position: relative;

    text-align: center;

    box-shadow: 1px 1px 2px #e6e6e6;

    cursor: default;

    background: #fff url(../images/bgimg.jpg) no-repeat center center

}

.view .mask, .view .content {

    width: 300px;

    height: 200px;

    position: absolute;

    overflow: hidden;

    top: 0;

    left: 0

}

.view img {

    display: block;

    height: 100%;

    max-width: 100%;

    vertical-align: middle;

    height: max;

    padding: 10px 20px 20px;

    position: relative

}

.view h2 {

    text-transform: uppercase;

    color: #fff;

    text-align: center;

    position: relative;

    font-size: 17px;

    padding: 10px;

    background: rgba(0, 0, 0, 0.8);

    margin: 20px 0 0 0

}

.view p {

    font-family: Georgia, serif;

    font-style: italic;

    font-size: 12px;

    position: relative;

    color: #fff;

    padding: 10px 20px 20px;

    text-align: center

}

.view a.info {

    display: inline-block;

    text-decoration: none;

    padding: 7px 14px;

    background: #000;

    color: #fff;

    text-transform: uppercase;

    box-shadow: 0 0 1px #000

}

.view a.info:hover {

    box-shadow: 0 0 5px #000

}



.view-first img { 

    transition: all 0.2s linear;

}

.view-first .mask {

    opacity: 0;

    background-color: rgba(219,127,8, 0.7); 

    transition: all 0.4s ease-in-out;

}

.view-first h2 {

    transform: translateY(-100px);

    opacity: 0;

    transition: all 0.2s ease-in-out;

}

.view-first p { 

    transform: translateY(100px);

    opacity: 0;

    transition: all 0.2s linear;

}

.view-first a.info{

    opacity: 0;

    transition: all 0.2s ease-in-out;

}



.view-first:hover img { 

    transform: scale(1.1);

} 

.view-first:hover .mask { 

    opacity: 1;

}

.view-first:hover h2,

.view-first:hover p,

.view-first:hover a.info {

    opacity: 1;

    transform: translateY(0px);

}

.view-first:hover p {

    transition-delay: 0.1s;

}

.view-first:hover a.info {

    transition-delay: 0.2s;

}

media css

@media only screen and (min-device-width: 340px)  {
.view {

    width: 300px;

    height: 200px;

    margin: 10px;

    float: left;

    border: 10px solid #fff;

    overflow: hidden;

    position: relative;

    text-align: center;

    box-shadow: 1px 1px 2px #e6e6e6;

    cursor: default;

    background: #fff url(../images/bgimg.jpg) no-repeat center center

                                        }

                   .view .mask, .view .content {

    width: 300px;

    height: 200px;

    position: absolute;

    overflow: hidden;

    top: 0;

    left: 0 

}

                  .view img {

    display: block;

    height: 100%;

    max-width: 100%;

    vertical-align: middle;

    height: max;

    padding: 10px 20px 20px;

    position: relative

}

.view h2 {

    text-transform: uppercase;

    color: #fff;

    text-align: center;

    position: relative;

    font-size: 17px;

    padding: 10px;

    background: rgba(0, 0, 0, 0.8);

    margin: 20px 0 0 0

}

.view p {

    font-family: Georgia, serif;

    font-style: italic;

    font-size: 12px;

    position: relative;

    color: #fff;

    padding: 10px 20px 20px;

    text-align: center

}

.view a.info {

    display: inline-block;

    text-decoration: none;

    padding: 7px 14px;

    background: #000;

    color: #fff;

    text-transform: uppercase;

    box-shadow: 0 0 1px #000

}

.view a.info {

    box-shadow: 0 0 5px #000

}



.view-first img { 

    transition: all 0.2s linear;

}

.view-first .mask {

    opacity: 0;

    background-color: rgba(219,127,8, 0.7); 

    transition: all 0.4s ease-in-out;

}

.view-first h2 {

    transform: translateY(-100px);

    opacity: 0;

    transition: all 0.2s ease-in-out;

}

.view-first p { 

    transform: translateY(100px);

    opacity: 0;

    transition: all 0.2s linear;

}

.view-first a.info{

    opacity: 0;

    transition: all 0.2s ease-in-out;

}



.view-first img { 

    transform: scale(1.1);

} 

.view-first .mask { 

    opacity: 1;

}

.view-first h2,

.view-first p,

.view-first:hover a.info {

    opacity: 1;

    transform: translateY(0px);

}

.view-first p {

    transition-delay: 0.1s;

}

.view-first a.info {

    transition-delay: 0.2s;

Solution

Possible duplicate: @Media min-width & max-width

instead of all and use only screen and and instead of max-width use min-device-width This should solve your issue

EDIT:

For example you can't do this:

Original:

.view a.info:hover {

    box-shadow: 0 0 5px #000

}

New:

.view a.info {

    box-shadow: 0 0 5px #000

}

It will still have the HOVER because it's in the original file and it will use it.. What you can do is change the original to affect all screens other then the ones you want changed..

For example:

Screen with min size of 500px will have HOVER effect and here you add:

.view a.info:hover {

    box-shadow: 0 0 5px #000

}

but for second media screen so anything under 500

.view a.info{

    box-shadow: 0 0 5px #000

}

This would work... Now in your case you can try have a HOVER but keep it blank inside

Answered By - I am Cavic