The images having hotspots seems to be responsive. Please let us know from what screen size are you experiencing this or which mobile device are you using.
please visit rebelenergy.io and see on your desktop you will see the product images with hotspots are not fitting correctly,
also see screenshot,
im using a 13inch macbook pro (screenshot 1) and have a bigger screen (see 2nd image) for mobile it works correctly its desktop mode that the image is too big
how do I make these images responsive so they are smaller on mobile screens?
I have this code which makes the image fit for desktop but not for mobile - if I remove this then it fits correctly for mobile and not for desktop
.row .nectar_image_with_hotspots img {
width: auto;
margin-bottom: -200px;
height: 700px;
}
HI There,
How about you try using the regenerate thumbnail plugin so that you have different image sizes to fit on different screens.
Thanks.
surely there must be a way to have the image fit in the middle of the screen without having to use a different plugin?
I have even resized the image to have a height of 700px like in the css and it fits full screen height
Hi There,
Try using the Column Background Image Option instead as it has more flexibility: http://themenectar.com/docs/salient/page-builder-columns/ .
Thanks.
hi,
this image im referring to is the image with hotspot
Hi There,
The images having hotspots seems to be responsive. Please let us know from what screen size are you experiencing this or which mobile device are you using.
Thanks.
please visit rebelenergy.io and see on your desktop you will see the product images with hotspots are not fitting correctly,
also see screenshot,
im using a 13inch macbook pro (screenshot 1) and have a bigger screen (see 2nd image) for mobile it works correctly its desktop mode that the image is too big
Hi There,
Please try this css:
.row .nectar_image_with_hotspots img {width: 88%;
margin-bottom: -168px;
}
Thanks.
thanks that seemed to work