响应式 - 在一定宽度上隐藏 facebook 页面插件

Question

我试图隐藏 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

尝试：

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

或者，如果您使用的是 Bootstrap，请尝试 hidden-xs 或 hidden-sm。

祝你好运。

Answer 2

在您的代码中，您缺少 .fb-page 的右大括号，但我还要说，如果您想在该断点处完全隐藏某些内容，您应该使用 display: none。试试这个：

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

Answer 3

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

您有几个选择：

在您的 CSS .fb-page { display: none } 媒体查询中添加 !important。
稍后在 CSS 规则列表中应用媒体查询（在屏幕截图中的两条规则之后）
在要隐藏的 div 上输入 ID 而不是 class。

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

响应式 - 在一定宽度上隐藏 facebook 页面插件

Responsive - Hiding facebook page plugin on certain width

html

css

facebook

responsive-design

responsive