• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Can I avoid using !important in this situation (re: media querie)


br3n

Senior Member
#1
Hello there!

On my current website Basement31 - Brendan Patterson. Designer. my portfolio links are black and white until you roll over them (simple change of background position on hover) I've used media queries already to serve up a slightly different design for smaller browser windows such as phones or tablets... so far so good.

However - given that those devices dont really have a :hover function I want to override the background position change in my media querie...

If I do this..
(changing the background position from 0 -200px; as expressed in my css to 0 0;)

Code:
@media only screenand (min-width : 320px)and (max-width : 650px) {    a.veng-web { background-image: url(images/portfolio/sprites/veng-web.png); background-position: 0 0;}}
It doesn't work - But if I do this

Code:
@media only screenand (min-width : 320px)and (max-width : 650px) {    a.veng-web { background-image: url(images/portfolio/sprites/veng-web.png); background-position: 0 0 !important;}}
It does.(the only difference was the addition of !important)

My question is, am I missing something here or is there a better way of making this happen without resorting to !important ??

Thanks
 

br3n

Senior Member
#2
Arrff I was being a div...

overlooked the most obvious method and all sorted now

Code:
section.portfolio-container ul.portfolio-gallery-items li a { background-position: 0 0; }
BUT... if I had used the same selector(s) for my original code I assume I would still have to use !important? so media queries don't over-rule everything?

example:
Code:
section.portfolio-container ul.portfolio-gallery-items li a.veng-web:link, section.portfolio-container ul.portfolio-gallery-items li a.veng-web:visited { background-image: url(images/portfolio/sprites/veng-web.png); background-position: 0 -200px; }section.portfolio-container ul.portfolio-gallery-items li a.veng-web:hover, section.portfolio-container ul.portfolio-gallery-items li a.veng-web:active, section.portfolio-container ul.portfolio-gallery-items li a.veng-web:focus { background-position: 0 0; }
To over-rule that within a media query would I have to use !important?