How to make FontAwesome Icons Smaller/Responsive on Mobile

Site URL: http://www.crestres.com

I have added Image Map Pro to my website and it looks fine on desktop, but when I view the map on my phone, the location marker icons on the map are massive. What code do I need to add so that the icons are responsive (and size down appropriately) on mobile screens?

I cannot find it on your site. Can you provide a link to the page it is on?

So sorry--it can be found here: https://www.crestres.com/about

On 6/30/2021 at 12:17 AM, LaurelMcQ said:

So sorry--it can be found here: https://www.crestres.com/about

Add to Design > Custom CSS

/* Mobile-Map icons */
@media screen and (max-width:767px) {
i.fa.fa-map-marker {
    font-size: 15px;
}
}

Thank you @tuanphan that worked perfectly!

On 7/14/2021 at 1:31 AM, LaurelMcQ said:

Thank you @tuanphan that worked perfectly!

Do you need fix? (Checked July 22)

Site URL: https://www.crestres.com/

1. (Desktop-Footer) Reduce space under Contact link?

2. (Mobile-Header) Make mobile header transparent?

3. (Mobile-Footer) Reduce space under Contact link?