Como fixar os ícones de redes sociais em uma posição responsiva

  • Autor Autor Menorah
  • Data de início Data de início
Tradução em andamento: em alguns minutos este tópico estará em português. Por enquanto, o conteúdo está no original em espanhol. Ver original
M

Menorah

Épsilon
Hola, he estado haciendo algunos cambios en una de mis webs y no puedo dar con la solución para asignarle una posición fija a los iconos de las redes sociales.


Como verán, en la siguiente imagen, la posición de los botones de las redes sociales varían según el contenido:

y8XJw5G.png


Lo que yo realmente quiero es que la posición de los botones de las redes sociales sean fijas y responsivas, como podrán apreciar en la siguiente simulación:

eZWVetc.png


Logré encontrar una solución a medias aplicando "float", pero el problema que tiene es que no funciona bien en resoluciones bajas.


En fin, los iconos de las redes sociales se colocaron por medio de un shortcode y están encerrados dentro de un div:

Inserir CODE, HTML ou PHP:
[FONT=Consolas].post-list.list.big-item .content {
    padding: 0 0 0 5%;
    width: 52%;
}

[/FONT]

El css de las redes sociales es el siguiente:

Inserir CODE, HTML ou PHP:
.home .main-container .entry-content {
  overflow: hidden;
  position: relative; 
  height: 47px;
  line-height: 25px;
}


.home .main-container .entry-content:after {
  content: "\02026";
  text-align: center;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30%;
  height: 1.3em;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(249, 249, 239) 50%);
}

Saludos y espero su pronta respuesta.
 
Foi útil? Participe da conversa

Com sua conta grátis você pode responder, mandar mensagem privada ao autor e comprar com Saldo retido: o pagamento é liberado quando você recebe o combinado.

Leva 30 segundos · você volta a este tópico ao terminar
Yo las veo todas iguales en las imagenes, nose si te confundiste al copiar las imagenes

probaste hacerlo con una caja flexible y asignandole a cada elemento que ocupe un porcentaje fijo dentro del div
 
Yo las veo todas iguales en las imagenes, nose si te confundiste al copiar las imagenes

probaste hacerlo con una caja flexible y asignandole a cada elemento que ocupe un porcentaje fijo dentro del div

Fíjate bien en el espaciado entre las imágenes y del contenido (extracto) de cada entrada. Gracias por comentar.
 
¿Podrías dejar una demo para poder hacer pruebas con inspeccionar elemento?
 
Para poder ayudarte mejor creo que deberías dejar el html de tus articulos
Para dejar el div fijo en la parte inferior puedes usar position: absolute y bottom: 0 en el contenedor de tus redes sociales y position:relative en el contenedor del artículo. Si esto te produce problemas con el responsive puedes usar otras técnicas como con display:flex
 
Siéndote sincero, yo veo todos los botones iguales. De todas formas, haz un div .contenedor donde estén agrupadas todas tus imágenes y dales medidas dinámicas. Manda un MP si quieres con más información para tratar de ayudarte
 
Al div donde pones el resúmen del post ponle un min-height o height directamente y overflow: hidden para que el texto y los botones de redes sociales nunca choquen.

El detalle es que también tienes un título que pueden ser uno, dos, y hasta tres líneas, viendo esto sugiero que toda la caja de redes sociales tenga la propiedad position absolute alineado abajo y a la derecha y un background del mismo color del fondo, puede que en algunos casos esto tape el texto pero si tienes un buen título y una buena imagen ¿Quién va querer leer solo el resúmen 🙂?
 
Última edição:
Voltar
Topo