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 */