I've created a website with multiple stacked sections. Each section is contained within a div with the class class="concertDiv". In one of these sections, I want to display an album cover on the left side and three clickable text rows on the right side that change color on hover and lead to a specific link when clicked. However, I'm facing issues getting these links to function as intended.
Below is the HTML/CSS code for this particular section:
a.concertDesc {
white-space: nowrap;
color: #f65026;
text-decoration: none;
margin: 0 auto;
padding-bottom: 10px;
}
a.concertDesc:hover {
color: blue;
}
#albumCover {
border-radius: 7px;
width: 300px;
height: 300px;
}
.concertElement {
display: inline;
}
.concertDiv {
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
padding-left: 200px;
padding-right: 200px;
padding-bottom: 70px;
}
@media (max-width: 590px) {
p.concertDesc {
white-space: pre-line;
}
}
@media (max-width: 800px) {
#albumCover {
display: none;
}
}<div class="concertDiv">
<img id="albumCover" class="concertElement" src="assets/albumCover.jpg" />
<div class="concertElement" style="padding-left: 15px;">
<a class="concertDesc" href="https://google.com" target="_blank" style="font-size: 225%;">Click 1</a>
<a class="concertDesc" href="https://google.com" style="font-size: 150%;">Click 2</a>
<a class="concertDesc" href="https://google.com" style="font-size: 140%;">Click 3</a>
</div>
</div>Appreciate any help or feedback!