div css styling не отвечает на запрос СМИ для ширины

Question

У меня есть div, который я создал, который я использую для кнопки подписки. Этот div отлично реагирует на мой рабочий стол CSS, но он не отвечает на мои команды в моем медиа-запросе.

Я установил ширину для разных вещей, и она полностью занимает всю страницу и заполняет остальную часть моей страницы, пропуская ее, когда нормальный край будет нормальным.

Это div, с которым у меня возникают проблемы.

<div class="subscribebutton" onmouseover="this.style.background='#12BDB8';" onmouseover="this.style.color='white';" onmouseout="this.style.background='transparent';"> 
    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Subscribe</a> 
</div> 

Это внутри содержимого обертки я создал ..

<div class="newsletter-content"> 

       <div class="centermailimg"><img src="/images/mailicon.png" alt="mail"></div> 
        <p class="subscribecolortext">Get up-to-date news and special deals sent to your inbox</p><br> 
         <p class="subscribebodytext">We want to hear from you, let us know what we can do to make your experience better!</p> 
        <br><br> 
          <div class="subscribebutton" onmouseover="this.style.background='#12BDB8';" onmouseover="this.style.color='white';" onmouseout="this.style.background='transparent';"> 
           <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Subscribe</a> 
          </div> 

        <div id="light" class="newsletterenvelope"><a class="close" href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a> 
         <form id="newsletterform" action="" method="POST"> 
          <span class="spanlargefont"><span class="spancenter">Subscribe To Our Newsletter</span></span> 
          <div class="floatrightinline"><p>Subscribe to our newsletter to receive special promotions and get up to date news about BuyFarBest.</p></div> 
            <div class="center"> 
             <input class="inputbarcenter" name="name" placeholder="Name" type="text" required><br> 
             <input class="inputbaremailcenter" name="email" placeholder="Email Address" type="email" required><br><br><br> 
             <input id="newssubmit" name="submit" type="submit" value="Subscribe" a href = "javascript:void(0)" onclick = "document.getElementById('lightone').style.display='none';document.getElementById('fadeone').style.display='none'"></a> 
            </div> 
         </form> 
        </div> 
        <div id="fade" class="black_overlay"></div> 
        <div id="lightone" class="newsletterthankyou"><a href = "javascript:void(0)" onclick = "document.getElementById('lightone').style.display='none';document.getElementById('fadeone').style.display='none'">Close</a> 
         <span class="spanlargefont"><span class="spancenter">Thanks for subscribing!</span></span> 
          <p class="center">It won't be long before you start getting awesome deals sent to your inbox.</p> 
        </div> 
        <div id="fadeone" class="black_overlay"></div> 

        <br> 

      </div> 

Это нормальный рабочий стол CSS, который работает отлично.

.subscribebutton { 
width: 350px; 
padding: 20px; 
border-radius: 15px; 
border: 2px solid #12BDB8; 
background-color: transparent; 
color: #12BDB8; 
font-size: 1.5em; 
font-weight: bold; 
cursor: pointer; 
margin: auto; 
text-align: center; 
} 
.subscribebutton a { 
    text-decoration: none; 
    outline: none; 
    color: #12BDB8; 
    width: 100%; 
} 
.subscribebutton a:hover { 
    height: 100%; 
    width: 100%; 
    color: #FFFFFF; 
    -webkit-transition: color 300ms ease-in 200ms; /* property duration timing-function delay */ 
    -moz-transition: color 300ms ease-in 200ms; 
    -o-transition: color 300ms ease-in 200ms; 
    transition: color 300ms ease-in 200ms; 
} 
.subscribebutton:hover { 
    background-color: #12BDB8; 
    color: #FFFFFF; 
    -webkit-transition: background 300ms ease-in 200ms; /* property duration timing-function delay */ 
    -moz-transition: background 300ms ease-in 200ms; 
    -o-transition: background 300ms ease-in 200ms; 
    transition: background 300ms ease-in 200ms; 
} 

Затем CSS медиа запрос

.subscribebutton { 
    width: 100px; 
    padding: 15px; 
    border-radius: 15px; 
    border: 2px solid #12BDB8; 
    background-color: transparent; 
    color: #12BDB8; 
    font-size: 1.5em; 
    font-weight: bold; 
    cursor: pointer; 
    margin: auto; 
    text-align: center; 
} 
.subscribebutton a { 
    text-decoration: none; 
    outline: none; 
    color: #12BDB8; 

} 
.subscribebutton a:hover { 
    height: 100%; 

    color: #FFFFFF; 
    -webkit-transition: color 300ms ease-in 200ms; /* property duration timing-function delay */ 
    -moz-transition: color 300ms ease-in 200ms; 
    -o-transition: color 300ms ease-in 200ms; 
    transition: color 300ms ease-in 200ms; 
} 

Есть ли что-то я по-смотрел? Я застрял на этом навсегда.

Чтобы увидеть это, вы можете посетить сайт, на котором он находится на сайте buyfarbest.com. Это на индексной странице.

Answer 1

В вашем правиле css для '.footerbar li a' в строке 2392 вашего файла Style.css отсутствует закрывающая скобка. Именно это вызывает игнорирование некоторых из ваших запросов css для мультимедиа.

У вас есть:

.footerbar li a { 
    padding-top: 15px; 
    color: #CCCCCC; 
    padding: 0px 100px 0px 0px; 
    position: relative; 
    font-size: 0.7em; 
    font-family: Helvetica; 
    text-decoration: none; 
    outline: none; 

Оно должно быть:

.footerbar li a { 
    padding-top: 15px; 
    color: #CCCCCC; 
    padding: 0px 100px 0px 0px; 
    position: relative; 
    font-size: 0.7em; 
    font-family: Helvetica; 
    text-decoration: none; 
    outline: none; 
} 

Answer 2

Вы уже проверили свои медиа-запрос? это написано правильно? Или, может быть, вам нужно добавить некоторые «важные», например width: 100px! Important;