2017-02-16 19 views
-1

У меня никогда не было проблемы с таким медиа-запросом, как раньше. Обычно это просто делает что-то неожиданное, но не ничего. Мне не нужна помощь с фактическим эффектом, а также почему он не видит запрос. Если вы проверите код, его просто нет. Я ссылался на несколько других сообщений, но я отформатировал то же самое, насколько я могу судить, синтаксис мудрый.Запрос СМИ не вступает в силу

Вот мой HTML:

<div id="content_main"> 
    <div id="bottom"> 
     <div id="discord"> 
      <div id="header_headset"> 
       <h1>See who's online:</h1> 
       <div id="headset"></div> 
      </div> 
      <iframe src="https://discordapp.com/widget?id=90178023529127936&theme=dark" width="320" height="500" allowtransparency="true" frameborder="0"></iframe> 
     </div> 
     <div id="news_announcements"> 
      <h1>News and Announcements</h1> 
      <p>First and formost, welcome to CommonRoomGaming.com. If you are new here, just find a game you have that you want to play with others, and just jump onto one of our servers! You can find detailed connection instructions on each games page.</p> 
      <div id="News_Events"> 
       <ul> 
        <li>ECO Server Woes</li> 
        <li>New Server Incoming!</li> 
        <li>2/14/17 - Site Launched</li> 
       </ul> 
      </div> 
     </div> 
     <div id="S_A_G"> 
      <div id="sad_dragon"></div> 
      <div id="sag_comments"> 
       <h2>Not playing your favorite game?</h2> 
       <p>Here at CommonRoomGaming.com we don't discriminate against any games. If you want to play a game, odds are others have it and want to play it too! So with that said, if you don't see your favorite game listed, feel free to suggest it by letting us know in the below form.</p> 
      </div> 
      <div id="SAG_form"> 
      <FORM action="emailit.html" method="POST"> 
      <TABLE border="0" width="100%"> 
       <TR> 
        <TD>Your name and/or handle:</TD> 
       </TR> 
       <TR> 
        <TD> 
         <INPUT type="text" size="30" maxlength="40" name="name"></INPUT> 
        </TD> 
       </TR> 
       <TR> 
        <TD>Your email address:</TD> 
       </TR> 
       <TR> 
        <TD> 
         <INPUT type="text" size="30" maxlength="127" name="email"></INPUT> 
        </TD> 
       </TR> 
       <TR> 
        <TD>Your message:</TD> 
       </TR> 
       <TR> 
       <TD> 
        <TEXTAREA name="message" rows="4" cols="50" style="width:300px" ></TEXTAREA> 
       </TD> 
       </TR> 
      </TABLE> 
      <P> 
       <INPUT type="submit" value="Make it so."></INPUT> 
      </P> 
      </FORM> 
      </div> 
     </div> 
    </div> 
</div> 

И вот мой медиа-запрос:

@media screen and (max-width:500px){ 
#bottom { 
    width:350px; 
    display:block; 
    margin-right:auto; 
    margin-left:auto; 
} 

}

Вот мой codepen всего документа link

Опять же, Мне нужно только знать, что я делаю неправильно с медиа-запросом. Игнорируйте что-нибудь несвязанное, так как все меняется.

+0

Я не могу воспроизвести это. Ваш медиа-запрос отлично работает в Chrome на моем рабочем столе, в окне Web Inspector отображаются разные правила, применяемые к '# bottom', когда я делаю свой обозреватель в браузере более узким, чем 500 пикселей. – Dai

+0

В кодексе он работает так, как должен – Johannes

+0

DNS-кеширование. omg ... так глупо. извините за то, что тратили свое время. Я вытаскиваю волосы. лол –

ответ

0

Проблема была связана с DNS кэшированием.