10
Lo que debes hacer es dejar el valor de la propiedad height como 0 y asignar un padding-bottom del mismo tamaño (en porcentajes) signado al width:
:root, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
div.bolaNavidad {
left: 10%;
top: 10%;
width: 20%;
height:0;
padding-bottom: 20%;
...
respondida el 6 nov. 18 a las 16:17
Bender Paisa
12k44 medallas de oro1919 medallas de plata3838 medallas de bronce
8
Me parece que el problema es que en el atributo media lo declaras mal.
El max-width, debería ser algo como esto:
media="(max-width: 400px)"
Con ello mostrará esa imagen cuando el maximo de la pantalla sea inferior a 400px.
Otro modo es que acotes dentro de min-width y hagas el proceso a la inversa. Poniendo la imagen slide01.jpg con un min-widht:400px ...
7
El problema reside en las clases de grilla que estás usando para tus columnas. Las clases col-xs no funcionan para Bootstrap 4.
La versión 4.0 tiene opciones de grilla diferentes a las de la versión 3.x. Bootstrap 4 no cuenta con las clases col-xs- que tiene la versión 3.x para las pantallas de menor tamaño, pero sí cuenta con las clases col-, que cumplen ...
respondida el 16 ago. 17 a las 18:32
cristiancajiaos
1,18511 medalla de oro66 medallas de plata1717 medallas de bronce
5
Buenas amigo puedes hacerlo con la propiedad de css display:flex
los objetos flexibles puedes manipular su orden y asi ponerlo de primero o segundo como a merite el caso para tu solucion es necesario subir el bloque2 a la posicion 1 para hacer eso:
.responsive li:nth-child(1){
order:1;
}
.responsive li:nth-child(3){
order:1
}
Por ...
respondida el 13 dic. 17 a las 0:17
Luis Daniel Rovira Contreras
2,56311 medalla de oro1111 medallas de plata2626 medallas de bronce
5
He cogido tu código y lo he cambiado hacia lo que creo que querías, si no he entendido mal querías que tu imagen se quedase como fondo y una buena manera es declarándola desde el css:
background: url("https://i.imgur.com/0r7qN8U.png") top center no-repeat;
La mejor manera de que este responsive es dándole porcentajes en vez de pixeles:
padding-right:15%;
...
5
Puedes incluir un div que encierre tu tabla y le agregas la clase table-responsive de bootstrap, esto le agrega un scroll en la parte inferior a la tabla:
<div class="table-responsive">
<table class="egt">
<caption>Cookies que utiliza esta web.</caption>
<tr>
<th scope="col">DOMINIO</th>
<...
respondida el 2 ene. 19 a las 19:43
DjCrazy
3,18222 medallas de oro1111 medallas de plata3131 medallas de bronce
5
Voy a suponer que estás usando la última versión de Bootstrap a la fecha.
Lo primero que debes establecer en tu CSS es que tanto el body como el html tenga un alto que ocupe el 100% en la vista del dispositivo usando height: 100%, aunque lo más recomendable es usar la unidad VH (viewport.)
Lo siguiente simplemente es usar, tanto en el contenedor principal (...
respondida el 2 may. 19 a las 13:51
Jheyman Mejia
3,63433 medallas de oro1717 medallas de plata4545 medallas de bronce
4
Una manera de conseguir esto sería cambiando un poco el HTML y usando FlexBox (para maquetar los elementos) y media queries (para detectar cuando estás en móvil y debe reorganizarse el contenido).
Pon todos los elementos como descendientes del mismo padre
Ponle display: flex y flex-direction: column al contenedor para que los elementos estén en vertical.
...
respondida el 20 may. 19 a las 14:56
4
Con display:flex; lo puedes hacer también, te dejo un ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
box-sizing: ...
respondida el 21 abr. 20 a las 15:21
jonasdamher
1,69611 medalla de oro22 medallas de plata1515 medallas de bronce
3
Asegurate que en tu HTML cuentes con el meta-viewport, y un consejo al momento de alterar el width al 100%, con el padding que le estas dando el div generara scroll horizontal por lo cual con calc al 100% de la pagina le restaras 80px que seria la suma de los 40px a cada lado del div que le das con el padding.
#inner {
margin: 0 auto;
padding: ...
respondida el 28 dic. 17 a las 14:00
Santiago Roldan
1,07833 medallas de plata1313 medallas de bronce
3
Recuerde que el css se ejecuta en cascada
por ejemplo si usted tiene
body{
color:red;
color:blue;
}
el navegador tomara en cuenta la ultima linea color blue
ustede debera ponerlo en el siguiente orden
body {
background-color:red;
}
@media (min-width: 768px) {
background-color:orange;
}
aca el navegador tomara en cuenta la ultima linea ...
respondida el 22 dic. 16 a las 5:03
Sergio Romero
36011 medalla de oro44 medallas de plata1414 medallas de bronce
3
Hola amigo hay varios metodos los mas seguros serian usar las medidas de la letra en base al (view port) units.
.texto p {
font-size: 3.5vw;
}
O puedes usar la media de pantallas para definir el texto a medida que la pantalla se reduzca o expanda.
@media only screen and (max-width:300px){
font-size: {12px}
}
Espero que te sirva
3
Estas dandole un z-index:2 al :before, por lo que cualquier elemento que quieras que esté encima tendras que darle un z-index mayor.
Podrias ponerle unposition:relative y un z-index:3al h1 para arreglarlo, aunque yo simplificaria poniendo color, trama y opacidad en una unica imagen base64 (png o svg).
Por cierto, el bottom y el right en el :before son ...
3
Yo creo que tu problema si que es que no midan lo mismo. Al tener caption-container con un height: 100% le estás diciendo que mida 100% de la altura de su padre, pero a su altura se le está restando la altura de la barra de herramientas de Google Chrome, como bien has apreciado. Por otro lado, tienes tu elemento .principal, cuya altura es la totalidad de la ...
respondida el 12 ago. 19 a las 8:01
phpMyGuel
11.9k11 medalla de oro1515 medallas de plata3737 medallas de bronce
3
Actualmente el grueso de tu página está dividido en 3 columnas que ocupan cada una de ellas 4 celdas del grid de Bootstrap. Para conseguir lo que necesitas debes hacer que cada columna pase de medir 4 celdas a 12, para que cada pareja de <label> + <input> ocupe toda la totalidad de la fila.
Así que lo que yo haría sería cambiar cada una de esas ...
respondida el 9 ene. 20 a las 16:55
phpMyGuel
11.9k11 medalla de oro1515 medallas de plata3737 medallas de bronce
3
Otra manera de lograrlo, claro esta quitando que los elementos estén flotando, es:
Haciendo que el elemento sea grid
Indicando en la creación de columnas que solo serán 2 y la primera es de 2rem y la restante es de 1 fr
De modo que de los 2 div que tiene internamente el primero ocupa una medida dada en rems y la segunda ocupará el espacio total disponible ...
respondida el 21 abr. 20 a las 15:14
BetaM
26.8k77 medallas de oro2424 medallas de plata4848 medallas de bronce
3
Para anidar columnas en Bootstrap hay que poner una fila (.row) contenedora de las mismas:
<div class="row">
<div class="col-6">
<div class="row">
<div class="card col-6">
<img class="img-fluid" src="img.jpg" alt="alternative">
</...
2
El grid system de bootstrap divide el ancho de la pantalla en 12 columnas, para resolver lo que planteas no necesitas implementar nada en javascript/jQuery mas que utilizar el css y js de bootstrap y las asignaciones de clases de columnas correctas.
Caso 1:
quiero que en tamaño large se visualice todo en una misma fila,
pero al variar el tamaño las ...
respondida el 10 jul. 17 a las 1:34
Marcos Martínez
2,30211 medalla de oro99 medallas de plata2121 medallas de bronce
2
Al utilizar librerías Bootstrap deberás añadir nuevos estilos con mayor autoridad, es decir añadirle el atributo !important.
Para que las imágenes se adapten sin problema aún contenedor se utiliza el siguiente estilo:
max-width: 100%; height: auto;
Si tienes imágenes de fondo, para no perder la cálidad de las imágenes de fondo debes realizarlo por medio ...
2
Te sugiero que hagas que que la ventana modal .contenidoventana mida la altura de la pantalla o un poco menos con la propiedad height: 100vh luego le agregas la propiedad overflow-y: scroll para poderte desplazar de forma vertical por el texto si este es muy largo.
respondida el 4 dic. 17 a las 12:51
Santiago Roldan
1,07833 medallas de plata1313 medallas de bronce
2
Actualmente wordpress recomienda la utilización del siguiente método para agregar los archivos tanto css como los js a los temas y no colocandolo en el header.php.
Debes agregar la siguiente función en el functions.php (cambia las "xxx" por el nombre de tu tema):
function xxx_scripts() {
wp_enqueue_style( 'style', get_stylesheet_uri() );
//cambia el "...
2
Si lo que quieres es que el fondo se repita solo en el eje Y con la propiedad background-repeat:repeat-y; lo puedes lograr
respondida el 1 dic. 17 a las 13:11
Santiago Roldan
1,07833 medallas de plata1313 medallas de bronce
2
Lo primero creo que seria que el mapa estuviera a linea con el box de los datos, para ello deberías cambiar esto:
.Mapa-MisDatos {
width: 800px;
margin: 20px;
}
Por
.Mapa-MisDatos {
width: 800px;
margin: 20px 0px;
}
En cuanto al problema general, diría que esta aquí:
.MisDatos {
height: auto;
**width: 75%;**
margin: 0 auto;
text-align: ...
2
.MisDatos tienes width: 75%; por lo que por el lado izquierdo te esta cogiendo espacio, y ocupa exactamente 800px. Al ser mayor que esos 75% aparece descentrado (más a la derecha que centrado).
Ejemplo: Ancho de 2000px, con el 75% se quedan en 1500px. 800px entran en esos 1500px, por lo que SI queda centrado.
Ejemplo2: Ancho de 1000px, con el 75% se quedan ...
2
Aunque puedo darte la respuesta para que lo soluciones "manualmente" debo decantarme por recomendarte usar algún framework que te facilite el diseño responsive (que es lo que tu deseas el poder visualizar una imágen según determinada resolución de pantalla o una imagen distinta si la resolución es menor).
Bootstrap es un excelente framework que te permite ...
respondida el 29 dic. 17 a las 19:14
Huskie
2,38722 medallas de oro77 medallas de plata2323 medallas de bronce
2
El atributo o propiedad que deberías cambiar es href, no src.
Puedes hacerlo de la siguiente forma. Le he dado un poco más de claridad al código, usando variables y un operador ternario. Al final establecemos la propiedad del enlace. Es posible que en este caso sea mejor usar prop en vez de attr, aunque generalmente funcionará con ambos.
La función quedaría ...
respondida el 13 feb. 18 a las 10:59
A. Cedano
72.7k1717 medallas de oro9898 medallas de plata194194 medallas de bronce
2
Tienes que usar los media query y decirle que sea display: none; cuando tenga ese tamaño.
De esta forma cuando tengas un ancho mínimo 414px el header sera ocultado con display: none;
@media only screen and (min-width: 414px){
header {
display: none;
}
}
2
Te he añadido un style en la cabecera, donde muestra desde el css una imágen, le he dado un alto predeterminado y una anchura para que siempre sea 100% desde el dispositivo desde el que se vea:
No se si es esto lo que quieres lograr:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" ...
respondida el 9 jun. 18 a las 11:42
Javier Avila Fernandez
50555 medallas de plata1616 medallas de bronce
2
En la parte de tu código donde haces los imports solo tienes JQuery y el JavaScript de Bootstrap, te falta el CSS.
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
El CSS debería tener un aspecto tipo:
<link rel="stylesheet" href="css/bootstrap.min.css">
Si aún así sigue sin funcionar ...
2
Ya tienes el diseño, solo falto un pequeño detalle para que se conserve el mismo estilo horizontal, para ello debes reemplazar esto: col-xs-12 por col-xs-4
Puedes mirar un poco más la documentación con algunos ejemplos muy prácticos.
sistema de filas y colummnas
.upcoming-section {
text-align: center;
padding: 93px 0 98px;
}
.upcoming-...
Solo están habilitadas las respuestas de wiki más votadas con una longitud mínima y que no pertenecen a la comunidad
Etiquetas relacionadas
responsive × 197css × 108
html × 94
html5 × 36
bootstrap × 35
javascript × 32
css3 × 31
mediaqueries × 19
jquery × 11
bootstrap-4 × 9
imagen × 8
menú × 8
div × 6
wordpress × 5
web × 5
diseño × 5
flexbox × 5
menu × 5
php × 4
sass × 4
navbar × 4
android × 3
programación-móvil × 3
jmenubar × 3
aplicación-movil × 3