Why are the icon links on my page not respond to clicks? - html

Question

And by not working, I don't mean that they don't load the page they're connected to. I mean the browser apparently doesn't even see them. Clicking does nothing, no change to the cursor on hover, right-clicking gives no options for "Open link" or "Open link in new tab". It's like they're not even there.
I've tried this in multiple browsers and on multiple devices. Same problem.
The links are written like so:
<div className={`${styles.listItem} ${styles.spotify}`}>
<a
className={styles.link}
href="https://open.spotify.com/artist/01MMcY0GSuDXOTUhyt4ung?si=YIgtCiw5SR26TejkA7dOcg&utm_source=copy-link&nd=1"
target="_blank"
/>
</div>
The only thing I could think to do was wrap the in the tags instead of the reverse. That only breaks it further. The icon won't even show up that way. I've tried inspecting the icons with dev tools, and the tags with the correct hrefs are there.
Here is the most recent version of the site. The problem is with the social media icons in the Contact section at the bottom of the page.
https://kmac-website-g8cm3chxl-a-shotwell.vercel.app/
And here is the code for the entire component:
import React from "react";
import styles from './Social.module.css'
const Social = () => {
return (
<div className={styles.main}>
<h1 className={styles.banner}>REACH OUT.</h1>
<div className={styles.socialContainer}>
<div className={styles.listContainer}>
<div className={`${styles.listItem} ${styles.spotify}`}>
<a
className={styles.link}
href="https://open.spotify.com/artist/01MMcY0GSuDXOTUhyt4ung?si=YIgtCiw5SR26TejkA7dOcg&utm_source=copy-link&nd=1"
target="_blank"
/>
</div>
<div className={`${styles.listItem} ${styles.facebook}`}>
<a
className={styles.link}
href="https://www.facebook.com/MixITMac"
target="_blank"
/>
</div>
<div className={`${styles.listItem} ${styles.instagram}`}>
<a
className={styles.link}
href="https://www.instagram.com/kmacxkmc/"
target="_blank"
/>
</div>
<div className={`${styles.listItem} ${styles.twitter}`}>
<a
className={styles.link}
href="https://twitter.com/KTHAMC1"
target="_blank"
/>
</div>
</div>
</div>
</div>
);
};
export default Social
Any help would be appreciated. Thanks.

Answer 1

I figured it out. The problem was that the links had no text, and the CSS was not set to take up 100% of the space of the containing div. So there was nothing to click on.
.link {
display: block;
height: 100%;
width: 100%;
}
This fixed the problem. I must have deleted the relevant CSS in a past version and wasn't aware of the problem until now. Thanks anyway, guys. Hope someone learns from my mistake.