Code For Scrollable Container on MOBILE ONLY. Embedded Block Overflowing on Mobile

Site URL: https://www.thebeautifulproject.org/about-our-programs

Hello!

I have been running into an issue with an image I embedded onto a page. 

The reason the image is embedded to start with is because it's an image map and I want people to be able to click the elements on our map to learn more about them. 

I'm able to see the image map fine on desktop, but on the mobile site, the image seems to be overflowing and creating a much wider page than I desire.

I would love if someone could help me with some code to keep the image within the container on mobile by putting the image into a horizontal scroll. I don't desire to make the image smaller, I just want to put the image map in a scroll container to keep the normal width of the mobile site. I would also love a scrollbar for people to see.

Below is the code for the image map I have placed into the embed block.

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="http://thebeautifulproject.org/s/PROGRAM-PIPELINE-medium-1476-750-px.png" usemap="#image-map">

<map name="image-map">
    <area target="_blank" alt="Black Girl Imagemaker Workshop" title="Black Girl Imagemaker Workshop" href="https://thebeautifulproject.org/black-girl-imagemaker-workshop" coords="188,227,429,252" shape="rect">
</map>

Thank you to anyone that can help!

Hi,

I see scroll bar here. Did you solve problem?