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规则＆＃39; .footerbar li a＆＃39;在Style.css文件的第2392行缺少一个右大括号。这就是导致您的某些媒体查询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

您是否检查了媒体查询？它写得对吗？或许你需要添加一些重要的＆＃39;在那里，像宽度：100px！important;

div css样式没有响应宽度

2 个答案: