Can't change image size in CSS as wanted

[Trond Hoyem]

Hi

I have a visualisation where there is one page with a lot of lamps that are controlled individually. I have added an image for each linked to the group addresses, and this works.

To be able to match it all to the background drawing, I need to make the images smaller. I have then added a class called "smallIcon" and added the following in CSS;

Code:

.smallIcon {

  width: 5px !important;
  height: 5px !important;
 
}

But when I refresh the page,  the width seems to have changed, but not the height. According to the inspect, the height should be 5px, but in the visualisation, the images are rectangular, and so some of them overlaps when they are very close. 

Any idea what I can do to change it?

I have also tried the following in Custom JS:

Code:

$(".smallIcon").find("img").css({ "width": "5px", "height": "5px" });

But the final visu still looks the same.