1

Tengo un problema intentando mover los divs con margin, padding y tambien con width, height, no se mueven ni redimensionan cuando los declaro en los media queries. En el CSS utilizo id y clases he probado mil maneras; con px, em, %... pero no hay manera. En cambio al cambiar algo en el CSS normal sí se mueven. Con display:none; funciona y desaparecen. También utilizo bootsrap de por medio para practicar.

No sé si este código servirá de algo para quien se moleste en revisarlo. Gracias de antemano.

<style>
@media only screen and (max-width: 485px) {

#container {margin-top:20%;}
.container {margin-top:10%;}

#footer {display:none;}
.footer {margin-top:100%;}
}
</style>
<div class="container" style="width:90%;">
        
         <div  id ="container" class="container" style="position:absolute;top:25%;left:4%;float:right;width:80%;height:auto;" >
         </div>
</div>    

<footer id="footer" class="footer" style="position:absolute;width:100%;height:20em;top:100%;" >
</footer>

2
  • <style> es una etiqueta html, no hay que ponerla en el css
    – user7176
    el 17 ene. 2018 a las 14:07
  • Por qué no intentas buscar mas en la documentación de bootstrap, al menos ver templates para que puedas hacer un mejor código, no te ofendas pero lo estas haciendo fatal. el 17 ene. 2018 a las 14:22

2 respuestas 2

1

No se por donde comenzar a corregir, tienes muchos errores, tanto relacionados a la pregunta como de maquetación html y uso de css. Pero voy a comenzar con corregir tu código a algo más legible.

También voy a aumentar el número del media query de 485px a 720px, ya que en estas demos no podremos nunca ver qué sucede si tratamos con un ancho tan pequeño y por la misma razón quitare el only screen ya que de otra forma nunca veremos el efecto a menos que reduzcamos la ventana del navegador y no es el caso con las demo de stackoverflow.

Cambios en tu html:

  • Añadi unos textos a cada elemento html.
  • Quite los estilos inline (style=""), que nunca debes usar (al menos no de esta forma).
  • Quite los ID que también sobraban y modifique la alineación para entender mejor.

En el CSS:

  • Puse los estilos inline que tenías en el html
  • Añadir color a los elementos para identificarlos mejor.
  • Cambie la forma en que usabas el media query como te mencione arriba para poder ver los cambios en el demo.
  • Por último añadí un código que puedes ignorar, para poder llamar y ver la clase en cada etiqueta html.

*{box-sizing: border-box; margin:0 padding: 0;}

.container{
  background-color: green;
}

.container .container{
  position:absolute;
  top:25%;
  left:4%;
  /*float:right; <-- si el elemento tiene posición absoluta
  esta propiedad no va a funcionar*/
  width:80%;
  height:20em;
  background-color: purple;
}

.footer {
  margin-top:100%;
  position:absolute;
  width:50%;
  height:20em;
  top:100%;
  background-color: yellow;
}

@media (max-width: 720px) {

  .container{
    width:90%;
    margin-top:10%;   
    background: gray;
}

  .container .container{
    position:absolute;
    width: 50%;
    top: 15px;
    left: 0;
    margin-left: 20px;
    background: cyan;
  }
  
  .footer{
    width: 30em;
    max-width: 90vw;
    margin-top: 20px;
    top: 50%;
    background: red;
  }
}



/*Ignora estos estilos de abajo*/
body *::before{content: attr(class) ": "; font-family: arial;}
<div class="container">
  <div class="container">
    Este container esta posicionado con respecto al primer container.
  </div>
</div>
<footer class="footer">
  Este footer esta posicionado con respecto al tamaño total de la ventana principal.
</footer>

Tengo un problema intentando mover los divs con margin, padding y también con width, height, no se mueven ni redimensiona cuando los declaro en los media queries. En el CSS utilizó id y clases he probado mil maneras; con px, em, %... pero no hay manera.

Si te fijas, yo he usado tu código y un media queries, no he tenido problemas para moverlos con px o porcentajes y te he explicado que hice con cada código.

Que te recomiendo:

  • Si vas a usar css, trata siempre que sea en un archivo externo y no en la etiqueta en linea style="".
  • La etiqueta style no se usa dentro de css.
  • La propiedad float no funciona o no tiene ningun efecto sobre elementos posicionados con position: absolute.
  • Siempre usa en lo posible Clases y no tanto ID.
  • Hoy día se recomienda empezar con los estilos por fuera de los media queries, como si fueran los usados en móviles y usar los media queries para cuando la pantalla se agrande, usando min-width en vez de max-width por ejemplo @media (min-width:720px){ }. De hecho de esta manera menos repites y menos código usas (en la mayoría de casos).
  • Estudia más sobre maquetación html, revisa como te sugirieron, bootstrap de twitter y como ordenan los elementos.

Ahora, si no he entendido bien tu problema, te animo a que re-edites tu pregunta y se mas especifico con lo que te sucede, eso si, trata de limpiar y ordenar el código como te recomiendo antes de proseguir para que sea más facil para nosotros ayudarte.

0

El problema que estás teniendo es que si la etiqueta style está rellena, prevalece sobre el css que asignes tanto a clases como ids. Ten cuidado, EVITA usar la etiqueta style, pásalo todo a tu código css.

El código de Gamez estaría correcto, pero añadiría el footer también al css, y lo eliminaría del style.

Espero que te haya servido.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.