Hola buenas,
Tengo una duda que no se como resolverla, en la web que estoy diseñando tengo este css para hacerla responsive.
Código:
/* 1024 Screens */
@media only screen and (min-width: 1000px) and (max-width: 1249px) {
#main {
width:700px;
}
#sidebar {
padding-left:60px;
}
}
/* Portrait Tablets */
@media only screen and (min-width: 768px) and (max-width: 999px) {
#sidebar {
padding-left:30px;
}
#main {
width:465px;
}
/* Portrait Mobiles */
@media only screen and (max-width: 767px) {
#sidebar {
width:275px;
margin-bottom: 0px;
padding-bottom: 30px;
padding-left:45px;
border-right: 1px solid #000;
}
#main {
width:285px;
float: left;
margin:0 auto;
text-align:center;
margin-left:0px;
padding-top:20px;
padding-left:20px;
text-align: left;
}
en mi html tengo :
Código:
<body >
<div id="container">
<div id="sidebar" style="background-color:#fff;margin-top: 50px;width: 260px;">
......
Si cambio en css general el container con #container { width:1150px;}, me lo cambia para todos los dispositivos, screen, tablets , mobiles etc...
Solo quiero que para web este a 1150px el container, pero para el resto que se quede igual.
Y si le pongo dentro de
Código:
@media only screen and (min-width: 1000px) and (max-width: 1249px) {
#container { width:1150px;}
#main {
width:700px;
}
#sidebar {
padding-left:60px;
}
}
No funciona... Alguien puede decirme que estoy haciendo mal.
En el header tengo :
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Saludos.