Como melhorar a responsividade da minha barra fixa para rádio no meu site

  • Autor Autor Adictonet
  • 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
Adictonet

Adictonet

Beta
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Hola a todos,

Tengo un problema al implementar una barra fija para la radio online de mi Web. Ya está funcionando pero quiero mejorar el diseño para que se adapte a diferentes dispositivos.

La barra es un div, que en su interior tiene 3 div hijos. Los dos primeros son de ancho fijo en pixeles, estos no se pueden cambiar ya que uno es la radio, el otro es un texto que dice "SONANDO" y el tercero es un marquesina que muestra el nombre de la canción que está sonando.

La barra ocupa todo el ancho del navegador es decir es Width: 100%, el primer contenedor ocupa 120px, el segundo ocupa 80px, y el tercero quiero que ocupe todo el ancho restante, sea cual sea el tamaño de pantalla.

HTML:
<div class="barra">
	<div class="radio"></div>
	<div class="sonando"></div>
	<div class="marquesina"></div>
</div>

Aquí les dejo el css básico sin los demás estilos para que sea más fácil de leer.

HTML:
     .barra {
                        position: fixed;
			width: 100%;
			height: 30px;
			background-color:#B9B9B9;
                        botom: 0px;
                        left: 0px;

		}

		.radio {
			width: 120px;
			height:30px;
			float:left;
		}

		.sonando {
			width: 80px;
			height:30px;
			float:left;
			
		}

		.marquesina {
			width: ¿¿¿???;
			height: 30px;
			float: right;
			
		}

Espero que puedan ayudarme.
Gracias
 
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
Hola que tal,

Si gustas permíteme el enlace de tu sitio web por mensaje privado para hacer una depuración desde Chrome y comentarte el código que necesitas.

Recuerda tener la barra implementada como la tienes actualmente para partir desde alli.

Saludos.
 
Listo, aquí tiene la página donde hago las pruebas
Barra Emisora

- - - Actualizado - - -

Hola que tal,

Si gustas permíteme el enlace de tu sitio web por mensaje privado para hacer una depuración desde Chrome y comentarte el código que necesitas.

Recuerda tener la barra implementada como la tienes actualmente para partir desde alli.

Saludos.
 
Última edição:
Listo, aquí tiene la página donde hago las pruebas
Barra Emisora

- - - Actualizado - - -

Quita esta línea de .barra:

/* height: 26px; */

Si no te sale por 26 seguro lo tendrás en 30.

Cuando ingreses desde el teléfono móvil, el texto lo mejor que hara es acomodarse por debajo del sonando (se ajustará al mismo estilo que tienes).

Saludos.
 
Quita esta línea de .barra:

/* height: 26px; */

Si no te sale por 26 seguro lo tendrás en 30.

Cuando ingreses desde el teléfono móvil, el texto lo mejor que hara es acomodarse por debajo del sonando (se ajustará al mismo estilo que tienes).

Saludos.

Mejor mirala desde FlowCartagena.Net | Champeta, Dancehall, Reggaeton y más
Ahí le coloque unas media queries para hacerla responsive, pero lo que quiero es que la medida que puse en pixeles para cada medida de pantalla, cambiarla en medidas relativas como porcentaje, pero al hacerlo no funciona.
 
Quítale el float: right; a la marquesina, y le pones un margin-left: 200px;

Así de sencillo :encouragement:

Ejemplo: Barra musica - JSFiddle

Saludos 🙂
 
Última edição:
Voltar
Topo