Media queries with CSS in WordPress

Question

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;

possible duplicate of [@Media min-width & max-width](http://stackoverflow.com/questions/13550541/media-min-width-max-width) — I am Cavic, Jan 10 '14 at 06:59

score 1 · Answer 1 · answered Jan 10 '14 at 08:18

this works.

@media only screen and (max-device-width: 340px)

Using @media and removing the hover selectors from your css code allows the hover effects to show up on tablets and phones. This is a simple solution and negates the need to use any javascript to make your css work on touchscreen devices.

score 0 · Accepted Answer · edited May 23 '17 at 11:51

0

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

edited May 23 '17 at 11:51

Community

1
1

answered Jan 10 '14 at 06:57

I am Cavic

1,115
1
10
22

used @media only screen and (min-device-width: 340px) no luck – Michael Queue Jan 10 '14 at 07:22
Can you post your code from ORIGINAL and your NEW code, it is possible that class is inherited and it won't override.. – I am Cavic Jan 10 '14 at 07:31
posted. i'm sorry about the formatting. i tried to fix it but it wasn't letting me for some reason. The only difference in the code is that i took hover away from any elements that are using it.. – Michael Queue Jan 10 '14 at 07:41
You need to keep all original settings in your NEW CODE.. and just EDIT the properties.. Otherwise it won't work.. – I am Cavic Jan 10 '14 at 07:47
I thought that i was doing that when I took out all hover selectors. This css creates an opaque background with text in an
and text in a
and then a link. Should I write different custom css with the same desired effects using different elements?
– Michael Queue Jan 10 '14 at 07:56
1

@media only screen and (max-device-width: 340px) this works. thanks for your help. – Michael Queue Jan 10 '14 at 08:06
Repost it as an answer, it is great to find a solution – I am Cavic Jan 10 '14 at 08:10

score 0 · Answer 3 · answered Feb 15 '22 at 14:31

0

@media only screen and (max-width: 768px) {p{color:orange;}}

@media only screen and (min-width: 770px) {p{color:green;}}

answered Feb 15 '22 at 14:31

Positive Rider

1
2

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 15 '22 at 15:16

Media queries with CSS in WordPress

3 Answers3

and text in a