the other concerning thread is closed so here a little adding.
if i put a hotspot-image in a container f.e. 1/1 than the hotspots are not positioned correct. The hotspot-image works for images that are bigger or equal to the surrounding container. Or in color sections where they are placed in the center.
if you would like to place a small image and have hotspots the thing only works if
.flex_column .av-hotspot-container {
display: inline-block;
}
(see the container on bottom: http://www.guenterweber.com/entwurf/wp05/entwurf )
The hotspots are shifted – Hotspot 2 is on the right because of relative (percentage) positioning
but then the responsiveness of the image is lost.
i can solve this for one hotspot image per site by changing it to display:block beneath the image-size
but is it possible to get a better solution?
How can we afford this works
Hey Guenter!
Please add following code to Quick CSS in Enfold theme options under General Styling tab
.flex_column .av-hotspot-container {
display: table;
}
.avia-mozilla .flex_column .av-hotspot-container {
display: block;
}
Or you can add following code to Quick CSS to make image fullwidth
.av-hotspot-container img { width: 100%; }
Cheers!
Yigit