I am facing an issue with my code:
HTML
<section id="offer">
<div class="container">
<div class="row">
<div class="col col-md-12">
<h2>Offer</h2>
<p>
<img src="images/offer_img.jpg" class="img-responsive pull-left offer-img">
Vestibulum tristique turpis ac ligula pellentesque
</p>
<h4>We have the best offer in this country!</h4>
<ul>
<li><i class="fa fa-check"></i>morbi sollicitudin porttitor mi ac faucibus</li>
<li><i class="fa fa-check"></i>mi ullamcorper nisl laoreet placerat </li>
<li><i class="fa fa-check"></i>ut sem vitae dui bibendum</li>
</ul>
<p>Pellentesque placerat ante sit amet augue sagittis, quis laoreet ipsum egestas. Vestibulum tristique turpis ac ligula pellentesque, sit amet luctus velit vehicula. Curabitur malesuada leo sit amet nisi sagittis, mattis fringilla dui commodo. Morbi fringilla risus ut massa varius, at faucibus nibh maximus</p>
<p>Maecenas venenatis nisi non erat efficitur dictum</p>
</div>
</div>
</div>
</section>
I am attempting to make this section invisible when the screen is resized to 400px or smaller. Below is my CSS Media queries code.
@media all and(max-width:400px)
{
.navbar-brand img
{
height: 63px;
}
#offer
{
display: none !important;
}
}