Report

Здравствуйте уважаемые форумчане, подскажите пожалуйста, не получается сделать блок адаптивным(я в этом не очень разбираюсь =)) ). Уже голова кипит, все попереисправлял, переделал, удалял и добавлял, что просто запутался, очень прошу вас распутать и подсказать как правильно, чтобы я точно знал :). Спасибо заранее.
В чем собственно проблема: А в том, что этот блок не уменьшается пропорционально ширине экрана.
На 1 скриншоте он вообще выпадает из общего контента. А на 2 скриншоте появляется горизонтальная прокрутка.
Пересмотрел много роликов и статей, но чет так сильно запутался во всем этом :((.

CSS code блока и т.д: 
 
@media (max-width: 320px) {   .wat{     left: 260px;   } } .wat{   margin:0;   margin-left: 5.5em;   left: auto;   top: 260px;   border: 3px red solid;   border-radius: 3px;   width: 150px; height: 50px;   position: relative;   padding-left: 4px;   padding-top: 0px;   display: block; } #btn3{   position: absolute;   margin-left: 8px;   top: 13px;   border: 3px red solid;   border-radius: 3px;   width: 150px; height: 50px; } span{   font-size: 16pt;   margin-left: 50px;   position: absolute;   top: 14px;   left: -1px;   font-size: 16pt;   color: white; } .opa{   display: block;   border-radius: 3px;   border: 3px red solid;   width: 150px; height: 50px;   position: relative;   z-index: 100000;   margin-top: -12.8em;   margin-left: 18.5em; } @media (max-width: 320px){   .opa{     width: 25%;     height: auto;   } } Вот HTML Код:
<ul id="slides"> <li class="slide showing">Slide 1 <!--<div class='wat'><img id='btn3' src='app2.png'></img></div>--> </li> <li class="slide">Slide 2</li> <li class="slide">Slide 3</li> </ul> <div class='opa'> <img src='app.svg'></img> <span>App Store</span> </div>  
 
        

Приветствую друзья не могу понять почему не работает адаптивка.  Осваиваю адаптивную верстку на основе Grid . По задумке у меня несколько колонок которые при сжатии экрана менее чем 500 пикс., должны стать в две колонки. Не могу понять в чем подвох. Вроде бы пример элементарный.  Может какая синтаксическая ошибка. Буду оч признателен если подскажете. 

Недавно начал учиться верстке. Столкнулся с адаптацией, и тут возникла одна проблема: моя среда разработки как-будто не видит медиа-запросы. Написал примитивный код, чтобы проверить. У друзей код работает, у меня нет. Подскажите с чем это может быть связано. Прикрепляю скрины.

Есть у меня слайдер, каждый слайд - картинка, и на каждой картинке есть кнопка. Так вот задача, чтобы при адаптивном уменьшении картинки, кнопка сохраняла положение и изменяла размер пропорционально. Возможно ли это?
Вот пример https://jsfiddle.net/yhnf3m9L/1/
положение вроде сохраняется, а вот размер - беда.

В ступоре. Очень прошу помощи.
Дело такое. Верхняя шапка сайта (фиолетовая) не хочет адаптироваться под телефоны, причём всё остальное работает, кроме самой шапки и футера.
Так же замечена очень интересный баг: при проверки адаптивности сайта ресайзом окна или масштабированием в google chrome для десткопа или даже проверке с помощью специальных ресурсов - всё работает как надо. Вы можете сами проверить по адресу flixthebro.com
При этом заходя на сайт с любого мобильного устройства (тестировал на 3-х) выдаёт почему то другой результат.
Ещё несколько забавных примечаний: допустим установил я размер текста в шапке 32px и в контенте 32px. На телефоне размер шрифта в шапке никак не сопоставим с размером шрифта в контенте и намного мельче. То же самое и с футером. / Так же я эксперементрировал и пробовал убирать разные строки из css и ничего не получалось. Чем же эти два фиолетовых блока провинились? Почему они такие "особенные"?
Ах да ещё надо бы сказать, что сайдбар сделан только для того, чтобы в случае надобности начать его использовать активировать легко и просто, сейчас он абсолютно не нужен, но в отличие от этих двух работает отлично.
Я отчаялся и совсем перестал хоть каплю иметь соображения из-за чего это может быть. Прошу помощи от вас, господа формучане.