Pixelated images on mobile version

1. I have created three icon boxes for my home page.

Home

-I am using the style ‘Icon above shaded box’ with a custom image that is 75 px by 75 px.
-The images look fine on the desktop version, but in the mobile version they appear very pixelated. Here is a screenshot:
https://globalit.com/reports/svt/svt-stoppers-on-mobile.jpg
-I know that for the logo, we have to add a logo double size for the mobile version. Do I have to do the same for these images to look clear? If so, is there any way to add a larger version of the image in the icon box?
-Is there any type of other formatting (or a work around) that would work better?

2. In your sample website, http://unicon.hellominti.com/shortcodes/icon-boxes/, you show ‘Icon with circle above’ and the middle icon and right icon have different color background. How do we customize the background color? When I try it only turns to grey.
-In the sample mentioned above, it shows a Fontawesome icon. I was wondering if its possible to add a customized icon within the colored circle. When I add an image alternative, it doesn’t appear in the circle and it doesn’t appear at the top edge of the box (half in the box, half out of the box). Is there any way to make this look more like the example with an alternate image? See examples below.
https://globalit.com/reports/svt/svt-icon-box-questions.jpg
https://globalit.com/reports/svt/svt-icon-box-question-2.jpg

3. I have set the bottom padding at 40 px. When the page is refreshed, it shows the padding at the proper amount. But if I scroll down and scroll back up, the padding changed to 90 px. Is there any way to adjust this?

After the page is refreshed:
https://globalit.com/reports/svt/svt-icon-boxes-1-refresh.jpg

If you scroll down and then back up:
https://globalit.com/reports/svt/svt-icon-boxes-2-scroll-down-and-up.jpg

Ticket