title: How do I change the position of the buttons in responsive design?
body: <p>I am trying to change the positions of the buttons which will scale down to mobile relative to the image div. I tried position/absolute; but it didn't take effect. Neither did the buttons stay relative inside the image div. I am not sure if the media queries will do the job or not. Any solutions?</p>
  
  <pre><code>&lt;div id="hero-wrapper" class="main_wrapper hero"&gt;
  &lt;img src="images/home-hero-image.jpg" alt="fruute"&gt;
  &lt;div class="herobuttons"&gt;&lt;div id="hero-shop-cookies" class="hero-btn"&gt;&lt;a href="gourmet-cookies/index.html" onClick="_gaq.push(['_trackEvent', 'Homepage', 'Body', 'Cookies']);"&gt;shop cookies&lt;/a&gt;&lt;/div&gt;
     &lt;div id="hero-shop-gifts" class="hero-btn"&gt;&lt;a href="gift-baskets/index.html" onClick="_gaq.push(['_trackEvent', 'Homepage', 'Body', 'Gifts']);"&gt;shop gifts&lt;/a&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#hero-shop-cookies {
     top: 398px;
     left: 550px;
  }
  
  #hero-shop-gifts {
    top: 398px;
     left: 715px;
  }
  
  .main_wrapper hero{
      width: 100%;
  }
  
  #hero-wrapper{
     position: relative;
  }
  
  .hero-wrapper &gt; .hero-btn a{
    position: absolute;
     left: 0;
     right: 15px;
     bottom: 20px;
     top: 0;
    background-color: red;
  }
  
  @media screen and (min-width: 768px) {
  #nav-menu{
      display: none;
  }
  
  #navigation li, #navigation a{
      float:left;
  }
  
  .main_wrapper hero, .hero-btn{
      width: 100%;
  }
  
  .herobuttons{
      position: relative;
      left: 0;
      top: 0;
  }
  
    #slideshow-area{
       width: 300px;
    }
  }
  </code></pre>