#Duda con área de selección de ícono spotify

1 messages · Page 1 of 1 (latest)

chilly obsidian
#

Cómo puedo ajustar el área clicleable del ícono spotify? dicho ícono tiene un hipervínculo para llevarme a la página de dicha App, pero el área está muy separada de donde debería estar en la misma posición que el ícono. Cómo puedo arreglar esto? gracias. Mi HTML:

<div id="Inicio" class="sección">
<h2>Luís Martínez</h2>
<h3 class="hashtag">#Programador</h3>
<h3 class="hashtag">#Músico</h3>
<ul id="redes_sociales">
<li>
<ul id="spotify">
<a href="https://open.spotify.com/intl-es" target="_blank"></a>
</ul>
<i class="fa-brands fa-spotify"></i>
</li>
<li><i class="fa-brands fa-twitter"></i></li>
<li><i class="fa-brands fa-linkedin"></i></li>
<li><i class="fa-brands fa-square-instagram"></i></li>
</ul>
</div> Mi CSS:

#redes_sociales {
margin-top: 20px;
margin-left: -100px;
list-style: none;
display: flex;
gap: 10px;
}#redes_sociales li {
display: inline-block;
}#redes_sociales li a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
text-decoration: none;
color: inherit;
}#redes_sociales li a:hover {
color: #1db954;
}#redes_sociales li i {
font-size: 24px;
}#spotify {
margin-bottom: -47.5px;
} Al hacer los cambios que me sugirió el ícono de spotify se desajustó, por lo tanto, utilicé un <ul> para encerrar a

<a href="https://open.spotify.com/intl-es" target="_blank"></a>
y de esta manera poder acceder a este último a través del CSS para ajustar la posición del ícono, pero el área

quedó desajustada igualmente (más que antes) y no supe cómo ajustarla.

solid girder
#

amigo, me parece que no estás revisando tu HTML...

chilly obsidian
#

A qué te refieres amigo?

solid girder
#

no puedes meter una <a> dentro de una <ul>

#

por defecto las etiquetas <a> tienen un display inline, te tocará modificarlo o resetearl al display inline-block, para que tenga un comportamiento en bloque