Cómo fijar los iconos de redes sociales en una posición responsiva

Menorah · 18 Oct 2016

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:

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:

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:

Insertar CODE, HTML o 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:

Insertar CODE, HTML o 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.

yosoyjolly · 18 Oct 2016

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

Menorah · 18 Oct 2016

yosoyjolly dijo:
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.

aperpen · 22 Oct 2016

¿Podrías dejar una demo para poder hacer pruebas con inspeccionar elemento?

NRK79 · 12 Nov 2016

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

Marketing Doing · 5 Dic 2016

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

denzel · 9 Dic 2016

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 🙂?

Cómo fijar los iconos de redes sociales en una posición responsiva

Menorah

yosoyjolly

Menorah

aperpen

NRK79

Marketing Doing

denzel

Temas similares