如何更改响应式设计中按钮的位置？

Question

我想改变按钮的位置，这将缩小到手机相对于图像股利。我试过位置/绝对;但它没有生效。这些按钮也不会保留在图像div内。我不确定媒体查询是否可以完成这项工作。任何解决方案

<div id="hero-wrapper" class="main_wrapper hero"> 
<img src="images/home-hero-image.jpg" alt="fruute"> 
<div class="herobuttons"><div id="hero-shop-cookies" class="hero-btn"><a href="gourmet-cookies/index.html" onClick="_gaq.push(['_trackEvent', 'Homepage', 'Body', 'Cookies']);">shop cookies</a></div> 
    <div id="hero-shop-gifts" class="hero-btn"><a href="gift-baskets/index.html" onClick="_gaq.push(['_trackEvent', 'Homepage', 'Body', 'Gifts']);">shop gifts</a></div></div> 
</div> 

CSS

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

Answer 1

变化最小宽度：768px;到最大宽度：768px;