title: Deleting or resizing the images for different div's depending on which @media its in?
body: <p>So ive managed to figure out how to use @media to change the width for my website but the button images become very small and wanted to change the size for part of the website.
  Ive figured out how to change all the images on the website to be a larger image size but it kind of makes things look out of place!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>@media only screen and (max-device-width: 480px) {
  img {
      width: 65px;
      height: 65px;
  }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>so if i wanted to change only the containers div images to a certain height/width, what should i do? 
  Also can you change a image not even to do with a div, like a single image in the html using these @media ?
  and last thing while im asking, can you make images disappear using @media?
  I have been searching the web for a answer for awhile now and cant figure this out!!! any help would be really appreciated :) thanks
  Heres the code to my website if thats needed?
  and my website is www.lawrencetrigg.tk
  cheers guys and girls!
  <div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Lawrence Trigg&lt;/title&gt;
  &lt;link rel="images/favicon.ico" href="images/favicon.ico"&gt;
  &lt;style type="text/css"&gt;
  
  
  
  
  a:-webkit-any-link{
  text-decoration:none !important;
  }
  body {
   background-color: black;
  }
  #top {
     position: absolute;
      top: 0px;
      background-image: url("images/background-top-one.jpg");
      background-repeat: repeat-x;
      left: 0;
      right: 0;
      width: 750px;
      height: 100%;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
  
  }
  #bottom1 {
     position: fixed;
      background-image: url("images/background-bottom-one.jpg");
      bottom: 0px;
      left: 0;
      right: 0;
      width: 750px;
      height: 150px;
      color: black;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
   
  }
  
  div.transbox {
  font-size: 16px;
  
    margin: 30px;
    background-color: #AAAAAA;
    border: 1px solid black;
    opacity: 0.7;
    filter: alpha(opacity=60); /* For IE8 and earlier */
  }
  
  div.transbox p {
    margin: 5%;
    font-weight: bold;
    color: #000000;
  }
   div.col-middle-one {
   float: left;
   width: 100%;
   font-size: 20px;
   padding: 1px;
  
   height: 250px;
  
   
   border-color: white;
   color: white;
   top: 50px;
  }
  
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
   top: 0px;
  }
  
  
  li {
      float: left;
  }
  
  li a {
      display: inline-block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
  }
  
  li a:hover {
      background-color: #111;
  }
  
  
  a.tooltip {outline:none; }
  a.tooltip strong {line-height:30px;}
  a.tooltip:hover {text-decoration:none;} 
  a.tooltip span {
      z-index:10;display:none; padding:14px 20px;
      margin-top:60px; margin-left:-160px;
      width:300px; line-height:16px;
  }
  a.tooltip:hover span{
      display:inline; position:absolute; 
      border:2px solid #FFF;  color:#EEE;
      background:#333 url(cssttp/css-tooltip-gradient-bg.png) repeat-x 0 0;
  }
  .callout {z-index:20;position:absolute;border:0;top:-14px;left:120px;}
      
  /*CSS3 extras*/
  a.tooltip span
  {
      border-radius:2px;        
      box-shadow: 0px 0px 8px 4px #666;
      /*opacity: 0.8;*/
  }
  
  
  @media screen and (max-width:850px) {
   
   #top {
      position: absolute;
      top: 0px;
      background-image: url("images/background-top-one.jpg");
      background-repeat: repeat-x;
  
      width: 100%;
      height: 100%;
      text-align: center;
  
  }
  #bottom1 {
      position: fixed;
      background-image: url("images/background-bottom-one.jpg");
      bottom: 0px;
      width: 100%;
      height: 150px;
      color: black;
      text-align: center;
   
  }
  }
  @media only screen and (max-device-width: 480px) {
  img {
      width: 65px;
      height: 65px;
  }
   #top {
      position: absolute;
      top: 0px;
      background-image: url("images/background-top-one.jpg");
      background-repeat: repeat-x;
  font-size: 25px;
      width: 100%;
      height: 100%;
      text-align: center;
  
  }
  #bottom1 {
      position: fixed;
      background-image: url("images/background-bottom-one.jpg");
      bottom: 0px;
      width: 100%;
      height: 250px;
      color: black;
      text-align: center;
   
   
  }
  div.transbox {
  font-size: 25px;
  
    margin: 30px;
    background-color: #AAAAAA;
    border: 1px solid black;
    opacity: 0.7;
    filter: alpha(opacity=60); /* For IE8 and earlier */
  }
  
  }
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="top"&gt;
  
  &lt;div class="col-top-one"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a class="active" href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="education.html"&gt;Education&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#skills.html"&gt;Skills&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#work.html"&gt;Work&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#gym.html"&gt;Gym&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="images/cv/lawrencecv2016.docx"&gt;Download CV&lt;/a&gt;&lt;/li&gt;
    
    &lt;a href="https://www.facebook.com/Lawrencetrigg" class="tooltip"&gt;
      &lt;img src="images/icons/social-facebook32.png" onmouseover="this.src='images/icons/social-facebook322.png'" onmouseout="this.src='images/icons/social-facebook32.png'"  /&gt;
      &lt;span&gt;
          &lt;img class="callout" src="images/callout_black.gif" /&gt;
          &lt;img src="images/icons/social-facebook32.png" style="float:right;" /&gt;
          &lt;strong&gt;Facebook&lt;/strong&gt;&lt;br /&gt;
  
      &lt;/span&gt;
  &lt;/a&gt;
    &lt;a href="https://www.steam.com" class="tooltip"&gt;
      &lt;img src="images/icons/social-steam32.png" onmouseover="this.src='images/icons/social-steam322.png'" onmouseout="this.src='images/icons/social-steam32.png'"  /&gt;
      &lt;span&gt;
          &lt;img class="callout" src="images/callout_black.gif" /&gt;
          &lt;img src="images/icons/social-steam32.png" style="float:right;" /&gt;
          &lt;strong&gt;Steam&lt;/strong&gt;&lt;br /&gt;
  
      &lt;/span&gt;
  &lt;/a&gt;
   &lt;a href="https://www.youtube.com" class="tooltip"&gt;
      &lt;img src="images/icons/social-youtube32.png" onmouseover="this.src='images/icons/social-youtube322.png'" onmouseout="this.src='images/icons/social-youtube32.png'"  /&gt;
      &lt;span&gt;
          &lt;img class="callout" src="images/callout_black.gif" /&gt;
          &lt;img src="images/icons/social-youtube32.png" style="float:right;" /&gt;
          &lt;strong&gt;Youtube&lt;/strong&gt;&lt;br /&gt;
  
      &lt;/span&gt;
  &lt;/a&gt;
   &lt;a href="https://www.dropbox.com" class="tooltip"&gt;
      &lt;img src="images/icons/social-dropbox32.png" onmouseover="this.src='images/icons/social-dropbox322.png'" onmouseout="this.src='images/icons/social-dropbox32.png'"  /&gt;
      &lt;span&gt;
          &lt;img class="callout" src="images/callout_black.gif" /&gt;
          &lt;img src="images/icons/social-dropbox32.png" style="float:right;" /&gt;
          &lt;strong&gt;Dropbox&lt;/strong&gt;&lt;br /&gt;
  
      &lt;/span&gt;
  &lt;/a&gt;
   &lt;a href="https://www.skype.com" class="tooltip"&gt;
      &lt;img src="images/icons/social-skype32.png" onmouseover="this.src='images/icons/social-skype322.png'" onmouseout="this.src='images/icons/social-skype32.png'"  /&gt;
      &lt;span&gt;
          &lt;img class="callout" src="images/callout_black.gif" /&gt;
          &lt;img src="images/icons/social-skype32.png" style="float:right;" /&gt;
          &lt;strong&gt;Skype&lt;/strong&gt;&lt;br /&gt;
  
      &lt;/span&gt;
  &lt;/a&gt;
    &lt;a href="https://www.google.com" class="tooltip"&gt;
      &lt;img src="images/icons/social-googleplus32.png" onmouseover="this.src='images/icons/social-googleplus322.png'" onmouseout="this.src='images/icons/social-googleplus32.png'"  /&gt;
      &lt;span&gt;
          &lt;img class="callout" src="images/callout_black.gif" /&gt;
          &lt;img src="images/icons/social-googleplus32.png" style="float:right;" /&gt;
          &lt;strong&gt;Google Plus&lt;/strong&gt;&lt;br /&gt;
  
      &lt;/span&gt;
  &lt;/a&gt;
  
  
  &lt;/ul&gt;
  &lt;div class="col-middle-one"&gt;
  
  
  
   &lt;div class="transbox"&gt;
      &lt;p&gt;Lawrence William Trigg&lt;/p&gt;
   &lt;p&gt;I am a bright, young and ambitious individual who is self-motivated and organised. I can work well under pressure and am able to meet targets and deadlines, I am eager to learn new skills and feel the ones currently gained give a vast and varied history to draw from and implement in new situations. Working well within a team is something I enjoy, however I am also capable of working under my own initiative. &lt;/p&gt;
   &lt;/div&gt;
  &lt;div class="transbox"&gt;
      &lt;p&gt;Under Construction&lt;/p&gt;
   
   &lt;/div&gt;
   &lt;/div&gt; 
  
  &lt;/div&gt;
  &lt;div id="bottom1"&gt;
  &lt;a href="#" class="tooltip"&gt;
      &lt;img src="images/icons/icon-mobile1.png" onmouseover="this.src='images/icons/icon-mobile2.png'" onmouseout="this.src='images/icons/icon-mobile1.png'" /&gt;
      &lt;span&gt;
          &lt;img class="callout" src="images/callout_black.gif" /&gt;
          &lt;img src="images/icons/icon-mobile1.png" style="float:right;" /&gt;
          &lt;strong&gt;Mobile Number&lt;/strong&gt;&lt;br /&gt;
          0481718550
      &lt;/span&gt;
  &lt;/a&gt;
  &lt;a href="#" class="tooltip"&gt;
      &lt;img src="images/icons/icon-email1.png" onmouseover="this.src='images/icons/icon-email2.png'" onmouseout="this.src='images/icons/icon-email1.png'"  /&gt;
      &lt;span&gt;
          &lt;img class="callout" src="images/callout_black.gif" /&gt;
          &lt;img src="images/icons/icon-email1.png" style="float:right;" /&gt;
          &lt;strong&gt;Email Address&lt;/strong&gt;&lt;br /&gt;
          lawrencetrigg@me.com
      &lt;/span&gt;
  &lt;/a&gt;
  &lt;a href="#" class="tooltip"&gt;
      &lt;img src="images/icons/icon-picture1.png" onmouseover="this.src='images/icons/icon-picture2.png'" onmouseout="this.src='images/icons/icon-picture1.png'"  /&gt;
      &lt;span&gt;
          &lt;img class="callout" src="images/callout_black.gif" /&gt;
          &lt;img src="images/icons/icon-picture1.png" style="float:right;" /&gt;
          &lt;strong&gt;Name&lt;/strong&gt;&lt;br /&gt;
          Lawrence Trigg
      &lt;/span&gt;
  &lt;/a&gt;
  &lt;a href="#" class="tooltip"&gt;
      &lt;img src="images/icons/icon-home1.png" onmouseover="this.src='images/icons/icon-home2.png'" onmouseout="this.src='images/icons/icon-home1.png'"  /&gt;
      &lt;span&gt;
          &lt;img class="callout" src="images/callout_black.gif" /&gt;
          &lt;img src="images/icons/icon-home1.png" style="float:right;" /&gt;
          &lt;strong&gt;Test&lt;/strong&gt;&lt;br /&gt;
       Home
      &lt;/span&gt;
  &lt;/a&gt;
  &lt;a href="#" class="tooltip"&gt;
      &lt;img src="images/icons/icon-favorite1.png" onmouseover="this.src='images/icons/icon-favorite2.png'" onmouseout="this.src='images/icons/icon-favorite1.png'"  /&gt;
      &lt;span&gt;
          &lt;img class="callout" src="images/callout_black.gif" /&gt;
          &lt;img src="images/icons/icon-favorite1.png" style="float:right;" /&gt;
          &lt;strong&gt;Test&lt;/strong&gt;&lt;br /&gt;
       Favorite
      &lt;/span&gt;
  &lt;/a&gt;
  &lt;a href="#" class="tooltip"&gt;
      &lt;img src="images/icons/icon-website1.png" onmouseover="this.src='images/icons/icon-website2.png'" onmouseout="this.src='images/icons/icon-website1.png'"  /&gt;
      &lt;span&gt;
          &lt;img class="callout" src="images/callout_black.gif" /&gt;
          &lt;img src="images/icons/icon-website1.png" style="float:right;" /&gt;
          &lt;strong&gt;Website&lt;/strong&gt;&lt;br /&gt;
       http://lawrencetrigg.tk/
      &lt;/span&gt;
  &lt;/a&gt;
  &lt;a href="#" class="tooltip"&gt;
      &lt;img src="images/icons/icon-dob1.png" onmouseover="this.src='images/icons/icon-dob2.png'" onmouseout="this.src='images/icons/icon-dob1.png'"  /&gt;
      &lt;span&gt;
          &lt;img class="callout" src="images/callout_black.gif" /&gt;
          &lt;img src="images/icons/icon-dob1.png" style="float:right;" /&gt;
          &lt;strong&gt;Date Of Birth&lt;/strong&gt;&lt;br /&gt;
     8th May 1989 / 26 Years old
      &lt;/span&gt;
  &lt;/a&gt;
  &lt;a href="#" class="tooltip"&gt;
      &lt;img src="images/icons/icon-location1.png" onmouseover="this.src='images/icons/icon-location2.png'" onmouseout="this.src='images/icons/icon-location1.png'"  /&gt;
      &lt;span&gt;
          &lt;img class="callout" src="images/callout_black.gif" /&gt;
          &lt;img src="images/icons/icon-location1.png" style="float:right;" /&gt;
          &lt;strong&gt;Test&lt;/strong&gt;&lt;br /&gt;
       Location
      &lt;/span&gt;
  &lt;/a&gt;
  
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>