My current setup is almost perfect, but I am struggling to keep the green rectangle centered on the browser between 835px and 320px width. Any solutions using CSS or JavaScript are welcome.
This is my first time posting a question on stackoverflow, so I hope I have provided enough information. Thank you in advance for your help.
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
.bottles-container-mobile .container-fluid {
overflow: auto;
background: #ccc;
}
.product_map_image_mobile {
width: 835px;
height: 359px;
overflow: auto;
overflow-y: hidden;
margin: 0 auto;
white-space: nowrap;
position: relative;
}
.product_map_image_mobile .product_map_link_mobile {
display: inline-block;
position: absolute;
text-indent: -999em;
overflow: hidden;
}
/* Styles for different elements within the product map image */
.product_map_image_mobile #product_map_link_mobile_0 {
width: 77px;
height: 193px;
top: 117px;
left: 20px;
background:blue;
}
/* Repeat styles for other elements here */
</style>
</head>
<body>
<div class="wrapper">
<div class="bottles-container-mobile">
<div class="container-fluid">
<div class="row-fluid">
<div class="product-solutions-green-bar-mobile">
<div class="product_map_image_mobile">
<a class="product_map_link_mobile" id="product_map_link_mobile_0" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_1" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_2" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_3" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_4" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_5" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_6" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_7" title="" href="#"></a>
<a class="product_map_link_mobile" id="product_map_link_mobile_8" title="" href="#"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>