Media Queries in CSS

[Vire]

Hello there,

 

basicly this is a topic around the module "Advanced Background Changer" but since its about .css its a bit more general.

 

I used to add "@media (min-width: 1900px!important)" in the css property tab of the module to just display the background if the resolution is atleast 1900px width. Since we use backgroudns designed for the main customer group (1920x1080p) we want to disable them for lowers and use a default grey then. 

 

Our normal command isnt working currently so, any suggestions?

[dioniz]

You need to put something in media query like this:

@media (min-width: 1900px) {
    #left_column{
        background:#fff;
    }
}

So left column will be white as long as window minimum width is bigger or equal to 1900px

[Vire]

Well, thanks for the reply.

 

I also figured that out earlier. My problem now is that i have no clue hwo to disable the background. After checking my website i saw that the background class is called "vegas-background" so i tried:

@media (min-width: 1900px){  
  #vegas-background{
    display:none;
  }     
}

i also tried it with a ".vegas-background" but it did nothing. As i said, im not sure how to disable this.

[vekia]

vegas-background is an id, instead of display:none; if you want to disable background just use: background:none!important;

 

you can also try display:none!important but im affraid that it will hide block with contents.

[Vire]

Hm well thanks, overall i have no clue what the id of the background is in css. This module is driving me crazy. In the .js background implementation you cant do something like @ media and in the css3 you cant use clickable zones and is tons of work to get the ID of your background ... such a not worth bought.