0

I am trying to hide an add when the screen is smaller than a certain size.

the relevant html section is:

<div id="content">
  <div id="articles">
    <h2>Article</h2>
    <p>Some article text.  Yadda yadda yadda yadda yadda.</p>
    <h2>Another Article</h2>
    <p>Some more article text.  Yadda yadda yadda yadda yadda...</p>
    <img src="ad.jpg" class="bannerad">
  </div>

the css I have now is:

@media screen and (max-width:480px)
 {
    #menu 
      {
       background-color: green;
      }
    #menu li
      {
       display:block;
       padding:15px;
       margin:0px;
      }
    #header 
      {
       color:green;
       font-style:italic;
       text-transform: uppercase;
      }
    #content h2{color:green};
    .bannerad {display:none};
}

how do i format the bannerad section to hide the ad?

Peter
  • 71
  • 6
  • You can always use javascript/jquery to add/remove/append css classes on any element, depending on various conditions, for your page. – Tyler S. Loeper Jan 11 '18 at 21:24
  • how is this done? I am trying to hide the ad – Peter Jan 11 '18 at 21:32
  • Something like: if ($(window).width() < 960) { document.getElementById('elementId').style.display = 'none'; } in jquery. Here is some links for your reference: https://stackoverflow.com/questions/4396983/hide-or-display-none-jquery, https://stackoverflow.com/questions/7715124/do-something-if-screen-width-is-less-than-960-px – Tyler S. Loeper Jan 11 '18 at 21:37

1 Answers1

1
@media screen and (max-width:480px) {
    #menu {
        background-color: green;
    }

    #menu li {
        display:block;
        padding:15px;
        margin:0px;
    }

    #header {
        color:green;
        font-style:italic;
        text-transform: uppercase;
    }

    #content h2 {
        color: green;
    }

    .bannerad {
        display: none;
    }
}
bstojanovski
  • 48
  • 7