Search the Community

Здравствуйте уважаемые форумчане, подскажите пожалуйста, не получается сделать блок адаптивным(я в этом не очень разбираюсь =)) ). Уже голова кипит, все попереисправлял, переделал, удалял и добавлял, что просто запутался, очень прошу вас распутать и подсказать как правильно, чтобы я точно знал :). Спасибо заранее. В чем собственно проблема: А в том, что этот блок не уменьшается пропорционально ширине экрана. На 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 пикс., должны стать в две колонки. Не могу понять в чем подвох. Вроде бы пример элементарный. Может какая синтаксическая ошибка. Буду оч признателен если подскажете.

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

Добрый день форумчане. Совсем недавно - вчера, начал работать с медиа-запросами и у меня возникло несколько вопросов: Записывать медиа-запросы стоит вначале css документа, в конце или непосредственно под самим селектором? Нужно ли указывать ширину блока (или задавать любое значение селектору) используя @media? Ведь если расположить @media вначале css документа и при этом задать значение нужному селектору, без !important медиа-запрос работать не будет, т.к далее в css документе уже указано значение селектора. Что я имею ввиду: @media screen and (max-width:640px){.wrapper{width:600px}}.wrapper{width: 800px;}/*———————————————————————————-если в строке @media не применить значение .wrapper{width: 600px !important;}, оно работать не будет, т.к. ниже уже указана другая ширина блока.———————————————————————————-*/Можете поделиться секретами, кто и как делает, и как следует делать?

Добрый день. При вёрстке шаблона столкнулся с такой проблемой: используя медиа-запросы без указания !important к нужному селектору, медиа-запросы не работают. Например: @media screen and (max-width: 640px){ .wrapper{ width: 600px !important; }}Если удалить !important ширина блока останется одинаковой, для любого разрешения экрана.

Начал изучать вёрстку сайтов под любое устройство. Ну т.е. адаптивный дизайн. Как я понимаю существует способ создания с помощью Медиа-запросов с подключением Respond.js для IE. Но так же есть технология создания одного сайта вычисляя с помощью формулы пропорций в процентах «target / context = result» для всех устройств(Fluid Grid). Все таки как правильно делать и какие сильные-cлабые стороны данных вопросов. Мне почему-то кажется что с помощью Fluid Grid не совсем получается то что надо и проблем с будущей версткой будет очень много..Например нужно в таком случае подгонять изображения, контент и т.п. постоянно. Прав ли я? Попробовал создать с помощью Fluid Grid все вроде правильно. Проверил для всех устройств отображение, все как есть. Пока весь сайт не стал верстать, подскажите что может быть не так.. З.Ы. Простите меня если что.. (прощенное воскресенье сегодня)

Приветствую всех. Подскажите есть ли в спецификации CSS3 вложенные медиа-запросы и, если да, то как они поддерживаются современными мобильными и десктопными браузерами? Спасибо.