I have a CSS image map that I've put together using various online tutorials and help pages (I don't have any actual experience with CSS, so this is all rather new to me). The desktop version works well, but I'm trying to adapt it for mobile use. I found some JS code that adjusts the image map and it's coordinates, but my problem now is that the popups that appear when labels are "clicked" (or touched, on a phone) won't scroll. Trying to scroll using one's finger scrolls the background page, but not the popup itself. Is there a way to make the popups scrollable? I tried adding "overflow-y: auto !important;" to popup:target, which someone suggested as a solution to another poster. This doesn't actually do anything on mobile, though. It does add a scroll bar on desktop (which doesn't help because none of the popups are large enough to need scrolling on a bigger screen).
Below is the CSS and HTML I'm using, and a live version is at neweconomynyc.org/resize7.html. Thanks so much for any help anyone can provide.
main {
display: flex;
align-items: left;
justify-content: center;
}
.popup {
padding: 0px;
width: 100%;
background-color: rgba(100, 100, 100, 0.9);
color: white;
font-weight: 300;
font-size: 20px;
opacity: 0;
transform: scale(0);
transition: opacity 300ms, transform 300ms;
position: fixed;
top: 0;
left: 0;
}
.popup > .close {
position: absolute;
right: 6px;
top: 6px;
background-color: red;
padding: 4px 10px;
}
.popup:target {
opacity: 1;
transform: scale(1);
overflow-y: auto !important;
}
div.first {
opacity: 1 !important;
}
And this is the HTML (truncated, as the full code has too many links and SO thinks its spam):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>CLT Projects in NYC</title>
<link rel="icon" type="image/x-icon" href="https://www.neweconomynyc.org/wp-content/uploads/2019/09/nep-logo-small.jpg">
<link rel="stylesheet" href="basic4.css" />
<link rel="stylesheet" href="mapc.css" />
<style>
body {
background-color: rgb(194,219,215);
}
</style>
</head>
<body>
<main>
<img width="1000" src="https://www.neweconomynyc.org/CLT_Projects_NYC.jpg" usemap="#clts" />
<map name="clts">
<area
alt="Cooper Square CLT"
title="Cooper Square CLT"
href="#coopersquare"
coords="343,379,551,406"
shape="rect"
/>
</map>
<div class="popup" id="coopersquare">
<div><p><img style="margin: 0 25px 30px 0; float: left;" src="https://www.neweconomynyc.org/wp-content/uploads/2023/03/CooperSquare_Map.jpg" width="425" /><h1>Cooper Square CLT</h1>
<hr>
<p><strong>Catchment Area:</strong> Lower East Side, Manhattan<br />
<strong>Website:</strong> <a href="https://www.coopersquareclt.org" target="_blank">coopersquareclt.org</a></p>
<p>Cooper Square CLT has its roots in community organizing efforts that successfully resisted Robert Moses' 1959 urban renewal plan, which would have generated mass displacement on Manhattan's Lower East Side. The Cooper Square Committee defeated the Moses plan and won city approval for a resident-driven plan calling for renovation of buildings instead of new construction, which led to the creation of the Cooper Square CLT and MHA in 1994.</p>
<p>
Together, the CLT and MHA steward and manage some 400 housing units for low and extremely-low income families, as well as 20 commercial units. The Cooper Square Committee, working alone and with the CSCLT, continues to lead community organizing and engagement efforts. In 2019, Cooper Square CLT expanded its portfolio when it acquired two distressed city-owned multifamily buildings ; the CLT is working to renovate the property and develop a democratic, tenant-led decision making structure.</p></div><a class="close" href="#"><strong>X</strong></a>
</div>
</main>
</body>
</html>