@Media different devices

Question

this is all my code:

    /* 1366 ----------- */
@media (min-width : 1326px) and (max-width : 1639px){
body {
background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg768.jpg')!important;
background-repeat:no-repeat!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:fixed!important;
background-position:center!important;
background-attachment:fixed!important;
}
}
/* 1680 ----------- */
@media (min-width : 1640px) and (max-width : 1800px){
body {
background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg1050.jpg')!important;
background-repeat:no-repeat!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:fixed!important;
background-position:center!important;
background-attachment:fixed!important;
}
}

/* 1920 ----------- */
@media and screen (min-width : 1800px){
body {
background-image:url('http://evoxity.net/modules/themeconfigurator/img/bg1200.jpg')!important;
background-repeat:no-repeat!important;
-moz-background-size:cover!important;
-o-background-size:cover!important;
background-size:fixed!important;
background-position:center!important;
background-attachment:fixed!important;
}
}

the 1920 is working perfectly and if i for example drag my windows bar to one of the sites it automaticly get rescaled and keeps the middle container on the background matching with the resize of the website.

I tried it with the 1680 res and a website called "Screenfly" but there the container stuck in the middle so i thought it still uses the 1920 res since changes to bg1050.jpg didnt change anything.

Than i jumped to 1366 because i got a notebook with that resolution but the result was the same. Any suggestions how to get the other devices to work as the 1920x1080 and 1920x1200 resolution?

The problem is probably all of your !important tags - css cascades hence css — Jon, Jun 26 '14 at 19:36
Just to reiterate what @JonSamwell said, you should ALMOST NEVER need to use !important. OCCASIONALLY there will be a weird situation where you will need to use it. Using it for every statement like you are doing will cause a lot of issues, which you are already seeing. — Steve Sanders, Jun 26 '14 at 19:55
the problem is, if i dont use the !important tag nothing happens. — Fabio Reims, Jun 26 '14 at 20:43

score 0 · Answer 1 · answered Jun 27 '14 at 07:45

You are using !important tags because it cannot override the previous query. To solve that you must use media queries in descending order according to screen size. For example:

@media screen and (max-width:900px){

   //some code here

}

@media screen and (max-width:768px){

  //some code here (Codes you write in here will override the codes from the previous media query which is 900px without using !important tags)

}

By doing that you can get rid of !important tags. You should also use proper media queries like this.

One example of proper media query structure: @media screen and (max-width:1080px)

Thanks for the advice. Anyways, that isnt working. Im pretty sure it relies to some of the body uses in globa.css im not really sure how its done in prestashop but ill come to that later after the redisign of the website. — Fabio Reims, Jun 28 '14 at 10:04

@Media different devices

1 Answers1