div css樣式不響應寬度的媒體查詢

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

您的Style.css文件第2392行上的'.footerbar li a'的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

您檢查過媒體查詢了嗎？ 是寫的對嗎？ 或者，您可能需要在其中添加一些“！important”，例如寬度：100px！important;