MrChezco1995 MrChezco1995 - 3 months ago 27
CSS Question

Responsive - Hiding facebook page plugin on certain width

I was trying to hide facebook page plugin but it looks like it doesn't work. Here's my code on CSS

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

here's the HTML part where I store FB.

<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="" 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="" class="fb-xfbml-parse-ignore"><a href="">TechKidPHMods</a></blockquote></div></div>

So any ideas? Thanks


OK, so the reason your display: nones aren't working is you have other rules in play.

You have a few choices:

  • Put an !important on your CSS .fb-page { display: none } media query.
  • Apply your media query later on in your list of CSS rules (after the two rules in the screenshot)
  • Put an ID on the div you want to hide instead of a class.

Consider learning your browser's web developer tools. This sort of problem can be easily debugged with them, as they'll show exactly why a particular rule is being ignored.