Currently, I am working on making a Joomla website responsive. However, I have encountered an issue with the SobiPro Map. The problem arises when displaying a map (background img) and points (a link + img) over it with an absolute position. As a result, when the size of the map is reduced, everything no longer fits properly.
Below is the HTML & CSS code:
<div id="system">
<article class="item">
<div class="content clearfix">
<div id="plan-boutiques">
<a href="#" id="repere-dia" style="" data-lightbox="width:600;type:iframe;">18</a>
<!-- 31 links like this ^ -->
</div>
</div>
</article>
</div>
CSS:
#plan-boutiques {
background: url(../images/rom/niveau.png) no-repeat;
position: relative;
display: block;
height: 374px;
width: 685px;
margin: 0 auto;
z-index: 1;
}
Each point (total of 31) has an ID applied to it in the following manner:
a#repere-dia {
left: 391px;
top: 182px;
}
I have tried adjusting pixel by pixel, but with 30 points, it is not a feasible solution. Therefore, I am seeking jQuery or Javascript solutions.
EDIT
New issue: The background remains centered even when the window size is reduced.