Responsive logo and title not hiding below set width

Hi,

I’ve been puzzling over this for hours and can’t seem to find the solution. Basically speaking I’m looking to have my site logo present and as the device width gets wider it will display as follows:

up to 799px just show the logo
between 800px and 899px show the logo and site description but site description in wrapped text format
above 900px show the logo and none wrapped site description

Here’s what I have in my WooThemes Canvas child style.css but the problem is that below 800px the site description is still displaying and makes a mess wrapping my header with fancy menu system.

@media only screen and (min-device-width: 300px) {
     #logo { width: 100%; }
     .site-description {
          display: none !important;
     }
}

@media only screen and (min-device-width: 800px) {
     #logo { width: 100%; }
     .site-description {
          position: relative;
          float: right;
          text-align: center;
          top: 40px;
          width: auto;
          clear:none;
          display: block !important;
          max-width: 280px;
     }
}

@media only screen and (min-width: 900px) {
     #logo { width: 100%; }
     .site-description {
          position: relative;
          float: right;
          text-align: center;
          top: 45px;
          width: auto;
          clear:none;
          display: block !important;
          max-width: 580px;
     }
}

Would’ve loved to have solved this myself but all answers welcome as this is now annoying me…. Many thanks for looking.

Michael