html - 响应式 - 在一定宽度上 Conceal facebook 页面插件

Question

我试图 Conceal facebook 页面插件，但它看起来不起作用。这是我的 CSS 代码

@media only screen and (max-width:800px){
.fb-page{
    visibility: hidden;
}

这是我存储 FB 的 HTML 部分。

<section id="login-form" class="no-margin customloginform">
    <label>Username: </label><br /><asp:TextBox runat="server" ID="txtUsername" type="text" CssClass="centermargin" class="form-control" required="required"></asp:TextBox><br />
    <label>Password: </label><br /><asp:TextBox runat="server" ID="txtPassword" type="password" CssClass="centermargin" class="form-control" required="required"></asp:TextBox><br />
    <asp:Button runat="server" id="btnLogin" type="submit" OnClick="btnLogin_Click" name="Login" class="btn btn-primary btn-lg centermargin" required="required" Text="Login" Width="150px"></asp:Button>
    <center><a href="Account/ForgotPassword.aspx">Forgot Password</a></center>
    <center style="color:#ffffff">Not a member? <a href="Account/Register.aspx">Register</a></center><br /><br />
    <div class="hidden-sm"><div class="fb-page " data-href="https://www.facebook.com/TechKidPHMods/" data-tabs="timeline" data-width="280" data-height="409" data-small-header="true" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"><blockquote cite="https://www.facebook.com/TechKidPHMods/" class="fb-xfbml-parse-ignore"><a href="https://www.facebook.com/TechKidPHMods/">TechKidPHMods</a></blockquote></div></div>
</section>

有什么想法吗？谢谢

Answer 1

好的，所以你的 display: none 不工作的原因是你有其他规则在起作用。

你有几个选择:

• 在你的 CSS .fb-page { display: none } 媒体查询上放置一个 !important。
• 稍后在您的 CSS 规则列表中应用您的媒体查询(在屏幕截图中的两条规则之后)
• 在要 Conceal 的 div 上放置一个 ID，而不是一个类。

考虑学习浏览器的网络开发工具。使用它们可以很容易地调试此类问题，因为它们会准确显示特定规则被忽略的原因。