Reputation: 1400
Media queries with CSS in WordPress
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;
Upvotes: 1
Views: 1945
Answers (3)
Reputation: 1
@media only screen and (max-width: 768px) {p{color:orange;}}
@media only screen and (min-width: 770px) {p{color:green;}}
Upvotes: 0
Reputation: 1400
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.
Upvotes: 1
Reputation: 1085
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
Upvotes: 0