Search code examples
htmlcssamp-html

How do I hide a DIV when I switch to mobile dimensions?


So, I have written a page in AMP HTML, and I have a DIV I want to hide when someone views the page on mobile, but I want it shown when it's on a resolution such as Desktop or Tablet. I have Bootstrap enabled and all of the CSS is styled in the of the document, per AMP Standards.

<section class="about" id="about" alt="about">

<div class="col-md-6">
<p>Example Content</p>
</div>

<div class="col-md-6">
<amp-img src="example.jpg" alt="Example" height="400" width="800"></amp-img>
</div>

</section>

I want the second DIV in the Section to be hidden on Mobile.


Solution

  • Bootstrap has classes for this sort of thing. Use them individually or in combination to achieve the desired result.

    hidden-xs

    http://getbootstrap.com/css/#responsive-utilities-classes