Tagged: enfold, image with hotspots, media elements, styling
Hi,
I couldn’t find out how to style the Image with Hotspots Media Elements. Finally, I found the relevant CSS. I offer my CSS to anyone who wants an easy starting point for making their own styles. I include a media query for the narrow width browser windows. Mine can be seen at:
The styles are:
/* TOOLTIPS */
.av-tt-default-width {
width: 300px;
height: auto;
border-radius: 20px;
border: solid 1px #444;
box-shadow: 5px 5px 10px #444;
padding: 0 11px;
background-color: #eee;
color: #000;
font-size: 125%;
}
.av-tt-default-width img {
border-radius: 15px;
border: solid 1px #aaa;
box-shadow: 0px 3px 6px #bbb;
padding: 0;
}
@media only screen and (max-width: 767px) {
.responsive .av-hotspot-fallback-tooltip { display: inline-block; }
.av-hotspot-fallback-tooltip-inner { margin-left: 0; }
}
Hey danowen777,
Thank you for sharing! :)
Best regards,
Victoria