how to remove/hide a class ad in CSS when creating responsive screen

Question

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?

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
– Tyler S. Loeper, Commented Jan 11, 2018 at 21:24
Something like: if ($(window).width() < 960) { document.getElementById('elementId').style.display = 'none'; } in jquery. Here is some links for your reference: stackoverflow.com/questions/4396983/hide-or-display-none-jquery, stackoverflow.com/questions/7715124/… — Tyler S. Loeper
– Tyler S. Loeper, Commented Jan 11, 2018 at 21:37

bstojanovski · Accepted Answer · 2018-01-11 21:36:53Z

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;
    }
}

answered Jan 11, 2018 at 21:36

bstojanovski

838 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peter Over a year ago

this works well, i did not know the semicolons worked this way as I am new. thanks!

bstojanovski Over a year ago

Btw don't forget to accept the answer if it's the correct one so the question gets closed.

Collectives™ on Stack Overflow

how to remove/hide a class ad in CSS when creating responsive screen

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related