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