Print Reseller Scheme
  1. 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)

Discussion in 'Website Design Forum:' started by br3n, Nov 21, 2011.

  1. br3n

    br3n Senior Member

    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
     
  2. br3n

    br3n Senior Member

    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?
     

Share This Page