Применение медиа-запроса до того, как оно должно быть

Question

Быстрая проблема со срединным запросом, который я, похоже, не могу исправить ... У меня есть страница пожертвования, где я хочу, чтобы кнопки отображались как 2 строки и 2 столбца, пока я не врывался в мобильные стили около 770px, где я хочу, чтобы они отображались в виде блоков в 1 столбце.

Однако, когда я пишу соответствующий мультимедийный запрос, он применяется на всех размерах экрана, а не только при получении ниже 770px ... Help? Вот HTML:

<form id="simForm" runat="server"> 
    <div align="center"> 
    <%--   <asp:DropDownList ID="ddlDonation" runat="server" style="border-color: #2bde73;border-radius:4px; width: 80px; margin-top: 15px;background-color:#ededed; margin-bottom: 15px;" Height="40px" onchange="javascript:OnSelectedChanged(this,event);" > 
      <asp:ListItem Value="10">$10</asp:ListItem> 
      <asp:ListItem Value="20">$20</asp:ListItem> 
      <asp:ListItem Value="50">$50</asp:ListItem> 
      <asp:ListItem Value="100">$100</asp:ListItem> 
      <asp:ListItem Value="Other">Other</asp:ListItem> 
     </asp:DropDownList>--%> 

    <br /> 
    <br /> 
    <asp:Label ID="lblDonation" runat="server" Text="Thank you for completing the survey and being willing to donate to me and my team. The $5 from the survey will go to me and my team and so will whatever you choose to donate. (Total Donation Amount is the Donation Amount plus a 5% service fee)" 
     style="font-size: 18px;"></asp:Label> 
    <br /> 
    <br /> 
    <asp:Button ID="btn10" Text="$10" runat="server" /> 
    <asp:Button ID="btn20" Text="$20" runat="server" /> 
    <asp:Button ID="btn50" Text="$50" runat="server" /> 
    <asp:Button ID="btn100" Text="$100" runat="server" /> 
    <asp:Button ID="btnOther" Text="Other" runat="server" /> 
    <asp:TextBox ID="txtOther" runat="server" onkeypress="return isNumberKey(event)"></asp:TextBox> 
    <asp:Button ID="btnDonate" Text="Donate Now" runat="server" /> 
</div> 
</form> 
    </body> 
    </html> 

И CSS:

  #btn10 { 
     font-size: 16px; 
     padding: 18px 30px; 
     background-color: rgba(245, 245, 245, 0.96); 
     color: #000; 
     font-weight: bold; 
     border: 1px solid black; 
     border-radius: 6px; 
     text-align: center; 
     cursor: pointer; 
     margin-top: 25px; 
     float:left; 
     margin-left: 225px; 
    } 
    #btn20, #btn100 { 
     font-size: 16px; 
     padding: 18px 30px; 
     background-color: rgba(245, 245, 245, 0.96); 
     color: #000; 
     font-weight: bold; 
     border: 1px solid black; 
     border-radius: 6px; 
     text-align: center; 
     cursor: pointer; 
     margin-top: 25px; 
     float: right; 
     margin-right: 225px; 
    } 
    #btn50 { 
     font-size: 16px; 
     padding: 18px 30px; 
     background-color: rgba(245, 245, 245, 0.96); 
     color: #000; 
     font-weight: bold; 
     border: 1px solid black; 
     border-radius: 6px; 
     text-align: center; 
     cursor: pointer; 
     margin-top: 25px; 
     float: left; 
     margin-left: 225px; 
    } 
    #btnOther { 
     width: 200px; 
     font-size: 16px; 
     padding: 18px 30px; 
     background-color: rgba(245, 245, 245, 0.96); 
     color: #000; 
     font-weight: bold; 
     border: 1px solid black; 
     border-radius: 6px; 
     text-align: center; 
     cursor: pointer; 
     float: left; 
     display: block; 
     margin: 200px auto; 
     float: none; 
    } 
    #btnDonate { 
     width: 200px; 
     font-size: 16px; 
     padding: 18px 30px; 
     background-color: rgba(245, 245, 245, 0.96); 
     color: #000; 
     font-weight: bold; 
     border: 1px solid black; 
     border-radius: 6px; 
     text-align: center; 
     cursor: pointer; 
     float: left; 
     display: block; 
     margin: 40px auto; 
     float: none; 
    } 
    #btn10:hover, #btn20:hover, #btn50:hover, 
    #btn100:hover, #btnOther:hover { 
     background-color: #2bde73; 
     transition: 0.5s; 
     color: #fff; 
    } 
    #btn10:active, #btn20:active, #btn50:active, 
    #btn100:active, #btnOther:active { 
     background-color: #2bde73; 
     transition: 0.5s; 
     color: #fff; 
    } 
    @media (max-width: 760px) { 
     #btn10, #btn20, #btn50, #btn100, #btnOther { 
      display: block; 
      float: none; 
      margin: 25px auto; 
     } 
    } 

Answer 1

Я создал jsfiddle с HTML генерируется из ASP.

Здесь: https://jsfiddle.net/qmxx1emp/

@media (max-width: 760px) { 
    #btn10, #btn20, #btn50, #btn100, #btnOther { 
     display: block; 
     float: none; 
     margin: 25px auto; 
    } 
} 

, но я не вижу никаких проблем. Кажется, что запрос СМИ применяется в правильной точке останова.

(Извините, чтобы представить это как ответ, но не достаточно, чтобы ответить на ваш вопрос)