Estoy practicando diseño responsive y estoy tratando de aplicarselo a este pedazo de codigo de HTML:
<div class="caja1">
<h1>Este es el titulo de la pagina</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis ducimus placeat eaque eum tempora voluptatibus aliquam tenetur at iure neque expedita, vero numquam doloremque exercitationem quisquam ipsum, beatae earum vitae?</p>
</div>
<div class="caja2">
<h1>Titulo de noticia</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique quibusdam, asperiores, laboriosam dignissimos harum ipsam inventore perspiciatis aspernatur magni quaerat officia a, tempora ut necessitatibus quam et explicabo quidem qui!</p>
</div>
Y este codigo en CSS:
@media only screen and (max-width: 800px){
div{
display: block;
width: 100%;
}
}
Aca el meta viewport que utilice:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Lei en otro post que intente sin utilizar only
pero seguía sin funcionar
Tengo la sensación de que no me estaria tomando only
y and
pero no se como solucionarlo