Tengo un sitio para armar que tiene una relación de aspecto fija de aproximadamente 16:9paisaje, como un video. Quiero centrarlo y expandirlo para llenar el ancho disponible y la altura disponible, pero nunca crecer más en ninguno de los lados. Por ejemplo: Una página alta y delgada haría que...
Tengo un sitio web que debe responder a los teléfonos móviles. Lo he creado usando mi escritorio. Cuando ajusto las ventanas del navegador, funciona perfectamente para el teléfono móvil, pero cuando lo verifico en mi teléfono móvil real: Samsung Galaxy S2 no responde a la vista móvil. ¿Qué podría...
El objetivo es que el <svg>elemento se expanda al tamaño de su contenedor principal, en este caso a <div>, sin importar cuán grande o pequeño sea ese contenedor. El código: <style> svg, #container{ height: 100%; width: 100%; } </style> <div id="container">...
Necesito agregar características de diseño receptivo a mi aplicación web usando Twitter Bootstrap. Solo quiero el comportamiento receptivo, no estoy interesado en la tipografía, los componentes o cualquier otra cosa incluida en Bootstrap. Obtuve una versión personalizada de Bootstrap simplemente...
Dado que Twitter Bootstrap está diseñado para ser receptivo / amigable con el dispositivo, ¿por qué no usa tamaños de fuente
Esto puede parecer una pregunta tonta. Si utilizo este fragmento de CSS para pantallas regulares (donde box-bg.pnges 200px por 200px); .box{ background:url('images/box-bg.png') no-repeat top left; width:200px; height:200px } y si uso una consulta de medios como esta para apuntar a pantallas...
Estoy tratando de crear una forma como en la imagen de abajo con un borde inclinado en un solo lado (por ejemplo, el lado inferior) mientras que los otros bordes permanecen rectos. Intenté usar el método de borde (el código se proporciona a continuación) pero las dimensiones de mi forma son...
Tengo este codigo: <footer class="row"> <nav class="col-sm-3"> <ul class="list-unstyled"> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul> </nav> <nav class="col-sm-3"> <ul class="list-unstyled">...
EDITADO: ¿ Quizás debería preguntar qué selector configura el relleno lateral cuando la pantalla se reduce a menos de 480px de ancho? He estado navegando por bootstrap-responsiveness.css durante un tiempo para localizar esto, pero nada parece afectarlo. Original Básicamente quiero eliminar...
¿Cómo espaciamos las consultas de medios con precisión para evitar superposiciones? Por ejemplo, si consideramos el código: @media (max-width: 20em) { /* for narrow viewport */ } @media (min-width: 20em) and (max-width: 45em) { /* slightly wider viewport */ } @media (min-width: 45em) { /*...
Actualmente tengo algo como: <div class="row"> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div class="col-md-4">Content</div> <div
Desde Bootstrap 3, ya no hay archivos separados para hojas de estilo estándar y receptivas. Entonces, ¿cómo puedo eliminar fácilmente las funciones de respuesta?
Descargué el ejemplo de Twitter Bootstrap y creé un proyecto de rieles simple con él. Copié el CSS donde es necesario y se muestra bien. También copié el js y todo funciona muy bien en mi escritorio: reorganiza la página cuando cambio el tamaño de mi navegador. Cuando se utilizan algunas...
Con las consultas de medios CSS, puede utilizar max-device-widthpara orientar el ancho de un dispositivo (como un dispositivo iPhone o Android) y / o un max-widthancho de página. Si usa max-device-width, cuando cambia el tamaño de la ventana del navegador en su escritorio, el CSS no cambiará,...
Sería bueno envolver estilos css para diferentes resoluciones dentro de algunas clases css usando less. Me gustaría hacer algo como: footer { width: 100%; } .tablet { footer { width: 768px; } } .desktop { footer { width: 940px; } } Al final, algo como esto debería ser el...
He estado tratando de ver qué srcsetimagen está usando mi navegador a través de las herramientas de desarrollo de navegadores, pero aparte de usar la pestaña de red para ver qué imagen obtiene, no puedo decirlo. Usar la pestaña de red normalmente estaría bien, pero a veces he notado que...
Últimamente, he estado diseñando sitios que son más receptivos y he estado usando consultas de medios CSS con frecuencia. Un patrón que noté es que el orden en el que se definen las consultas de medios realmente importa. No lo probé en todos los navegadores, solo en Chrome. ¿Existe una...
¿Cómo hacer que un iframe responda, sin asumir una relación de aspecto? Por ejemplo, el contenido puede tener cualquier ancho o alto, lo cual es desconocido antes de la representación. Tenga en cuenta que puede usar Javascript. Ejemplo: <div id="iframe-container">
Tengo algunos problemas reales al intentar que mi barra lateral / contenido de navegación (usando Bootstrap) se muestre (se expanda) de forma predeterminada en el escritorio y se cierre de forma predeterminada en el móvil y que el icono se muestre solo en el móvil. Parece que no puedo hacer que...