When I emulate my mobile settings for my site, the social icons should be gone; however, they stay. I have tried putting col-xs-0
in the i frames themselves, and nothing.
Here's my footer HTML.
<footer>
<div class="container-fluid">
<div class="row">
<div class="col-xs-0 col-md-2 pull-right footersocial">
<a href="#" target="_blank"><i class="fa fa-facebook-official fa-3x socialicons" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-twitter fa-3x socialicons" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-instagram fa-3x socialicons" aria-hidden="true"></i></a>
</div>
</div>
<div class="row" style="margin-left: 15px; margin-top: 15px;">
<div class="col-md-2 text-center">
<p>Privacy Policy</p>
</div>
<div class="col-md-2 text-center">
<p>Terms of Service</p>
</div>
<div class="col-md-2 text-center">
<p>Acceptable Use Policy</p>
</div>
<div class="col-md-2 text-center">
<p>Warranty & Returns Policy</p>
</div>
<div class="col-md-2 text-center">
<p>Third Party Copyright Notices</p>
</div>
<div class="col-md-2 text-center">
<p>Terms of Service for Phone</p>
</div>
</div>
</div>
</footer>
My CSS:
.socialicons {
color: white;
margin-right: 10px;
margin-top: 10px;
margin: 0 auto;
display: block;
}
.footersocial {
margin: 0 auto;
display: block;
}
.col-xs-0 {
display: none;
}
col-md-2
is probably overriding your custom CSS code withdisplay:block
. This might happen if you include your CSS code before thebootstrap.css
or it might be because of specificity reasons. There are ways to make your custom CSS code more specific so that it doesn't get overridden. But the better option is to usehidden-xs
as Praveen's answer says.