Запросы СМИ не работают?

Question

Я делаю что-то неправильно? Основном, когда кто-то на мобильную версию я хочу две верхних GRE таблицы, чтобы быть полной шириной Хереса JSFidle

CSS

@media screen and (max-width:480px){ 
     table[class="mobile_version"] { 
     width:100%; !important; 
     }; 
    }; 
    @media screen and (max-width: 480px){ 
    td[class="mobile-hide"]{ 
     display: none !important; 
    }; 
    }; 
    @media screen and (max-width: 480px){ 
    td[class="mobile-show"]{ 
     display: inline !important; 
     text-align: right; 
    }; 
    }; 

HTML

<tr> 
     <td> 
      <table class="mobile_version" style="float:left;display: inline-block;background-color:#F2F2F2; color: #231F20;font-family:Arial; font-size: 15px;height:50%; padding: 10px 10px 40px 10px; text-align: left; width: 45%;Margin-right:3%;line-height: 168%;Margin-top:10px"> 
      <tr> 
       <td> 
       <div> 
        <span> 
        <div><span style="font-weight:bold">Order #:</span><span>&nbsp;&nbsp;35644:</span></div> 
        <div><span style="font-weight:bold">Ordered by:</span><span>&nbsp;&nbsp;Dan Utterwood</span></div> 
        <div><span style="font-weight:bold">Paid by:</span><span>&nbsp;&nbsp;Debit Card</span></div> 
        <div><span style="font-weight:bold">Expected Delivery:</span></div> 
        <div><span>14th December</span></div> 
        <div><span style= "font-weight:bold">Postage Method:</span></div> 
        <div><span>Airmail</span></div> 
       </div> 
       </td> 
      </tr> 
      <table class= "mobile_version"style="float:left;display: inline-block; background-color:#F2F2F2; color: #231F20;font-family:Arial; font-size: 15px;height:50%; text-align: left;padding: 10px 10px 40px 10px; width: 45%;min-height:170px;Margin-top:10px"> 
      <tr> 
       <td> 
       <div> 
        <div><span style= "font-weight:bold; line-height:170%">Ordered to:</span></div> 
        <div><span>Ross Kemp</span></div> 
        <div><span>Space</span></div> 
        <div><span>Spacey Space</span></div> 
        <div><span>Spacey space, space</span></div> 
        <div><span>SP4C5E</span></div> 
        <div><span>Spaaace</span></div> 
        <div><span style= "font-weight:bold; line-height:135%">Delivery Instructions:</span></div> 
        <div><span>Leave with neighbors cat<span></div> 
       </div> 
       </tr> 
      </td> 
      </table> 
     </td> 
     </tr> 

Я уже сделал это реагировать, как вы может видеть со встроенным блоком: однако он просто не читает медиа-запросы

= - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = - = -

ОБНОВЛЕНО

Ok, так что это здорово у меня есть вопросы СМИ в однако так как я положил их в у меня было несколько проблем

1. первый набор блоков больше не выравнивается на одной строке, и я не могу поместить запас с правой стороны

2. Во-вторых, я не могу иметь два td.blahblah {afafsasdff} и они компенсируют друг друга из

JSFIDDLE

Answer 1

У вас есть много проблем с CSS. Во-первых, лучше, если вы используете селектор классов . вместо селектора атрибутов [attr]. Точки с запятой плохо написаны. Не нужно ставить точку с запятой после каждого разрыва строки в CSS, только в конце атрибутов.

Вы можете увидеть его здесь: http://jsfiddle.net/tLutv389/1/

Это ваш новый CSS

@media screen and (max-width:480px){ 
     table.mobile_version { 
     width:100% !important; 
     } 
    td.mobile-hide{ 
     display: none !important; 
    } 
    td.mobile-show{ 
     display: table-cell !important; 
     text-align: right; 
    } 
    } 

Answer 2

Change your css code 

    @media screen and (max-width:480px){ 
      table[class="mobile_version"] { 
      width:100% !important;//width:100%; !important; was wrong 
      }; 
     }; 
     @media screen and (max-width: 480px){ 
     td[class="mobile-hide"]{ 
      display: none !important; 
     }; 
     }; 
     @media screen and (max-width: 480px){ 
     td[class="mobile-show"]{ 
      display: inline !important; 
      text-align: right; 
     }; 
     };