Foros del Web » Creando para Internet » CSS »

no me funcionan los break points en el movil

Estas en el tema de no me funcionan los break points en el movil en el foro de CSS en Foros del Web. buenas estoy haciendo mis primeras pruebas online de mi primer website y bueno probando cosas.. he abierto la página desde mi terminal acer z205 (smartphone ...
  #1 (permalink)  
Antiguo 25/12/2014, 06:14
 
Fecha de Ingreso: diciembre-2010
Mensajes: 166
Antigüedad: 13 años, 2 meses
Puntos: 0
no me funcionan los break points en el movil

buenas estoy haciendo mis primeras pruebas online de mi primer website
y bueno probando cosas.. he abierto la página desde mi terminal acer z205 (smartphone típico vamos)
y veo que los breakpoints no funcionan... me sale la página como si la resolución fuera una pantalla grande...

me da un poco de verguenza pegar este css... ya que considero que es un poco desastre y poco reutilizable pero en fin... a ver si me ayudais y cualquier consejo me vendra bien respecto a como organizar mejor el css pero sobre todo los breakpoints : P

tengo que recortar un poco me dice que solo quieren 10.000 caracteres y tengo 12.000 jajaja

Código:
BODY { margin:0 auto; max-width:1024px;font-size:100%;background-image:url("../imagenes/fondoprincipal.png");}

HEADER { width:100%; background-image: background-image: -webkit-gradient(linear, left top, left bottom, from(#660000), to(#cc0000));
  background-image: -webkit-linear-gradient(top, #660000, #cc0000);
  background-image:    -moz-linear-gradient(top, #660000, #cc0000);
  background-image:     -ms-linear-gradient(top, #660000, #cc0000);
  background-image:      -o-linear-gradient(top, #660000, #cc0000);
 max-width:1024px;overflow:hidden; }
	.fondolibros {width:55%;float:right;}
			 
	HEADER .titol { height:auto;max-width:25%;display:flex;float:left;}
			.titol IMG {width:100%;align-self:center;}
	H1 {font-size:1.2rem;}
	H2 {font-size:1rem;}
			
		
		.idioma {width:100%;height:20px;}
		.selec-idioma {float:right;}
		.idioma A { margin-right:10px; font-size:14px;}
				.inactive {float:right; color:white; margin:5px;}
				.active {float:right; color:white; font-weight:bold;margin:5px;}

				NAV { font-size:1.1rem;background-color:black;  width:100%; border-top: 1px solid orange; max-width:1024px; margin-bottom:0.5%; line-height:40px;font-weight:bold;}
				NAV UL {display: -webkit-flex; display: flex; -webkit-flex-flow: row nowrap; flex-flow: row nowrap; -webkit-justify-content: space-around; justify-content:space-around;}
	NAV LI { display:inline;  List-style-type: none; }
	
	NAV LI  A:link, A:visited, A:active { text-decoration: none; color:grey;}
	NAV A:hover{color:white; display:block;}
	

	
FOOTER { display:flex;flex-direction:row;justify-content:space-around; width:100%; background-color:black; color:white; max-width:1024px; height:auto; margin:0 auto;  margin-top:1%;position:relative;}
	FOOTER  UL { display:inline;  List-style-type: none;min-width:150px; }
	FOOTER LH { font-weight:bold;}
	FOOTER .administracion { position:absolute; bottom: 0px; right:0px;}

@media only screen and (max-width : 625px) {
.per_edats {display:none;}
}
@media only screen and (max-width : 480px) {
.seccions {display:none;}}
	
	SECTION H2 {text-align:center;}
	label { float:left; margin:0% 0% 0% 3%; font-weight:bold; font-size:1.4em; width:100px;height:15px; display: inline;}
	.introlibro input { display:block; height:30px;}

.informacion {width:100%;height:50%;position:absolute;bottom:0px;color:white;display:none; background: rgba(0, 0, 0, .5););text-shadow: 2px 2px black;  }
.informacion P { margin-left:3%;}



.fichalibro {align-self:center;width:40%;  margin:0,5% 2%;}
	.fichalibro img { width:100%;border-radius:5px;}

.res { width:80%; margin: 1% auto; font-family:'Montserrat';font-size:1rem;}
.datoslibro{ display:flex; flex-direction:row; flex-wrap:nowrap; width:100%; align-items:stretch; margin:0,5% auto;  padding:0;}
	.datoslibro label {  display:inline; width:55%;min-width:250px;font-weight:bold; font-size:1.2em;}
	SECTION HR { margin: 1% auto;}
.datos { border:none; padding:0; margin-right:1%;font-family:'Montserrat';font-size:1em; box-shadow:none; width:55%;display:flex;  flex-direction:column; justify-content: space-between;}
.last {position: relative; bottom: -5px;}
.datos HR { margin: 1% auto;}
.datos .row {display:block;justify-content: space-around;}
.datos h2 { font-size:2em; margin-bottom:3%;}


.thumb { width:75px; height:75px; margin-top:10px;}
.letra {font-family: 'Montserrat'; font-size:1em; font-weight:bold;}


/* que es  */
.bubble 
{
position: relative;
display:flex;
max-width:90%;
font-size:1.1rem;
font-weight: bold;
text-align:center;
padding: 20px;
background: #FFFFFF;
border: #C10000 solid 4px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

.bubble:after 
{
content: "";
position: absolute;
bottom: -15px;
left: 60%;
border-style: solid;
border-width: 15px 15px 0;
border-color: #FFFFFF transparent;
display: block;
width: 0;
z-index: 1;
}

.bubble:before 
{
content: "";
position: absolute;
bottom: -19.5px;
left: calc(60% - 3px) ;
border-style: solid;
border-width: 18px 18px 0;
border-color: #C10000 transparent;
display: block;
width: 0;
z-index: 0;
}
.bubble P {vertical-align:center;
			align-self:center; margin:2%;}

.quees {width:40%;float:left;margin:2%;font-size:1rem; text-align:center;font-family:'Montserrat';}
.quees-iz {width:40%;float:right; margin:2%; font-size:1rem;text-align:center; font-family:'Montserrat';}

.contenedor {display:flex;width:100%; margin: 0 auto;}
.quisom { width:30%; margin: 5%; margin-top:3%;margin-bottom:10%;}
.roser {width:100%;box-shadow: 0 3px 6px #666; align-self:center;
-webkit-box-shadow: 0 3px 6px #666; padding: 5px 20px 40px 10px;margin:7% 2%;transform:rotate(-15deg);-ms-transform:rotate(-15deg); /* IE 9 */
-webkit-transform:rotate(-15deg); /* Opera, Chrome, and Safari */ margin-right:2%;}

.descripcion_trabajadores  { width:50%; font-family:'Montserrat';font-size:1.1rem;text-align:left;margin-left:5%; align-self:center;}

.cuerpo { max-width: 80%;
	float:left;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
    column-gap: 1em;}
.cuerpo:hover img{opacity:0.5;}
.cuerpo img:hover{opacity:1; }
	
.logos {max-width:20%; 
		float:right;
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;}	
.logos img { width:100%;
display: inline-block;
   margin: 0,5%;
   float:right;
	
    }
.mostrarlibro {display: inline-block;
    margin-top: 1%;
    width: 100%;
	justify: space-around;}
.mostrarlibro:hover { .mostrarlibro:not(:hover){opacity:0.4;}}

.mostrarlibro img { width:100%;}

@media only screen and (min-width : 150px) and (max-width : 480px) {
/* Styles */

HEADER .titol {max-width:40%;}
NAV {font-size:0.8rem;}
NAV UL { display:flex; flex-direction:column; flex-wrap:wrap;}

}

@media only screen and (max-width : 580px) { 
.quisom {width:60%; margin:2% auto;}
.contenedor {display:flex;flex-direction:column; flex-wrap:wrap;justify-content:flex-start; width:100%; margin: 0 auto;}	


}


@media only screen and (max-width : 675px) {
/* Styles */
Header .titol {max-width:75%;}
NAV {font-size:0.8rem;}

NAV UL LI {align-self:center;}
.tito IMG {margin: 0 auto;}
.fondolibros {display:none;}

.contenedor {display:flex; flex-wrap:nowrap;justify-content:flex-start; width:100%; margin: 0 auto;}	
.contenedor P {align-self:center;width:80%; margin:2%;font-size:0.9rem;}
.quien-somos {display:flex;flex-direction:column; width:90%;margin:0 auto;justify-content:space-around;margin-bottom:2%;}

.bubble{display:flex;align-items:center; width: 90%; margin-top:4%;margin-bottom:4%; margin-bottom:10px; padding:5px; }
.bubble P {align-self:center; margin: 4% auto; margin:10px auto;}
.texto {width:90%; text-align:center; margin:1% auto;}

}




/* iPads (portrait) ----------- */
@media only screen and (min-width : 675px) and (max-width : 3000px)  {
/* Styles */
Header.titol {max-width:50%;}
NAV {font-size:0.9rem;}
.contenedor P {font-size:1rem;}
.quien-somos { width:100%; display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;}
.texto {display:flex; width:100%; margin:2% text-align:center;align-self:center;}

.bubble {display:flex; width:100%; padding:5px;}
.bubble P {align-self:center; margin: 4% auto; font-size:1.2rem; margin:10px auto;}
.flex-item{display:flex;width:48%;margin-bottom:20px;height:20%;}
.flex-item  .texto {align-self:center;margin:0 auto;font-size:1rem;}
.texto {display:flex;}
.texto {align-self:center; text-align:center;font-size:1.1rem;}
.flex-item:nth-child(1){order:0;}
.flex-item:nth-child(2){order:1;}
.flex-item:nth-child(3){order:3;}
.flex-item:nth-child(4){order:2;}
.flex-item:nth-child(5){order:4;}
.flex-item:nth-child(6){order:5;}
.flex-item:nth-child(7){order:7;}
.flex-item:nth-child(8){order:6;}



}



	
/* infoadults */
.info {display:flex; flex-direction:row; flex-wrap:wrap;justify-content:flex-start;}

.infoadults {display:flex;flex-direction:column;flex-wrap:wrap; width:46%; border: 3px solid #C10000; margin:5px;padding:1%;  -webkit-border-radius: 15px; overflow:hidden;
-moz-border-radius: 15px;
border-radius: 15px;-webkit-box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    4px 4px 10px 0px rgba(50, 50, 50, 0.75);
box-shadow:         4px 4px 10px 0px rgba(50, 50, 50, 0.75);
position:relative; }
.infoadults H1 {Font-size:1rem;margin:5px auto; text-align:center;}
LH {font-weight:bold;font-size:0.8rem;}


/* 5 pasos */
.pasos {display:flex; flex-direction:column; width:80%;margin:0 auto;}
H1 {font-size:1.2rem;}
LH {Font-size:1rem;margin-left:1%;}
LI {Font-size:0.8rem;margin-left:1%;}
UL {list-style-type:none;padding:0;}

@media only screen and (max-width : 825px) { .infoadults {width:43%;}}
@media only screen and (max-width : 615px) {.infoadults {flex-direction:column;width:80%;justify-content:center;margin:1% auto;}}

/*bibliografia adults */
  #2 (permalink)  
Antiguo 25/12/2014, 07:09
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: no me funcionan los break points en el movil

¿Has especificado el viewport del documento?
__________________
(:

Etiquetas: background, color, funcionan, hover, movil, página, todo, width
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:28.