Такая беда: решил создать адаптивный шаблон для себя, но столкнулся с такой проблемой не применяется медиа запросы, медиа запрос стоит после основных стилей, проверял в хроме и в яндексе даже в песочнице.
html {
margin: 0;
padding: 0;
color: white;
height: 100%;
}
.conteiner {
width: 100%;
max-width: 1200px;
background-color: #000;
margin: 0 auto;
/*height: 1000px;*/
}
.content {
width: 66.66666666666667%;
background-color: inherit;
float: right;
}
.side {
width: 33.33333333333333%;
background-color: #ccc;
float: right;
}
.clear {
clear: both;
}
.footer {
width: 100%;
/*height: 100px;*/
background-color: #cc0;
}
@media screen and(max-width: 480px) {
.content,
.side {
float: none;
}
.content {
background-color: #ccc;
}
}
<div class="conteiner">
<div class="side">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima explicabo quis rerum facere veritatis exercitationem quia quas quaerat impedit molestiae quidem laborum porro nam optio praesentium ipsam amet, quo error!</div>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis velit mollitia, voluptas minus rem, nesciunt, ducimus at aperiam reprehenderit eos aspernatur. Hic, nobis corrupti totam veniam libero nesciunt vel enim!</div>
<div class="clear"></div>
<div class="footer">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit, facilis, quam. At esse magnam molestiae. Nihil, dolorum. Eveniet possimus iusto, esse suscipit soluta sint obcaecati aspernatur hic harum dolor, fugiat!</div>
</div>