Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • June 29, 2015 at 6:51 pm #466015
    hmsvictory

    I have some custom css applied to my #header.header_color so it has a background image. I don’t want that background image to show when in responsive mode (tablets and smaller).

    Here is what I tried, but the background image still shows up on screens smaller than 990px.

    The regular css:

    #header.header_color {background-image: url("//site.com/wp-content/uploads/2015/01/headerbg2.png");
background-repeat: repeat-x;
background-position: center bottom;
background-color: #8f9194;}

    The mobile css:

    @media only screen and (max-width: 990px) {
#header.header_color {background-image: none;
background-color: #8f9194;}
}
    June 30, 2015 at 2:01 pm #466409
    Rikard

    Hey hmsvictory!

    Could you try with the !important statement? Make sure all your caches are clean too. 

    @media only screen and (max-width: 990px) {
#header.header_color {
background-image: none !important;
background-color: #8f9194 !important;
}
}

    Cheers!
    Rikard

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.