Search the Community
Showing results for tags 'responsive'.
Found 25 results
-
Ребята, без вас никуда! Подскажите, пожалуйста, первый раз адаптирую и стилизую слайдер splide. Сам он работает, но как его стилизовать? В dev tools стилизация тех же стрелок отражается, но когда вношу их в css - не работает. Почему так? Как, например, тогда опустить ниже стрелки? Где устанавливать брейкпоинты и задавать им свойства? На сайте splide такая инфа по адаптиву. https://splidejs.com/guides/options/#breakpoints Вот типа того что-то пробую... https://jsfiddle.net/aqmuyhwd/
-
Помогите, пожалуйста, очень нужен взгляд со стороны. Проблема следующая - страница нормально отображается в десктопной версии, при ресайзе окна - тоже все ок. Но в режиме эмуляции моб. устройств ширина экрана больше чем ширина содержимого страницы. При этом проблема только в chrome firefox отображает нормально в любом режиме. Ниже скрин (режим моб. устройств). Код можно посмотреть здесь.
-
Голову ломаю уже несколько часов. Проблема с респонсивом для .portfolio-section .portfolio-item:nth-child. Без адаптива гриды норм работают, а когда медиа запрос идет, не работает. Ссылка на код(проект на SASS, лучше запускать через gulp, чтобы активировать SASS watcher) - https://cloud.mail.ru/public/Jsjw/vtaYeWHcD
-
Как сделать так, чтобы этот блок уменьшался по ширине экрана? На обычном ПК он максимально 960px в ширину. Я сделал изображение через тег <img> с шириной 100%, а блок с кружками со свойствами position: absolute; top: 50%; margin-top: -78px; right: 1.2%; width: 100%; Сами кружки прописаны так: margin: 0 0.9%; float: right; Но они сильно съезжают влево с фона при уменьшении разрешения. Как их оставить на своем месте и уменьшать динамически? Т.е. чтобы кружки (и их отступы) уменьшались вместе с блоками Вот что при уменьшении случается:
-
почему именно на определенном пикселе в адаптивной версте все ламается, тоесть если 1200 все ломаеться, а если 1199 и 1201 то все хорошо? Что в таких случаях делать?
-
Здравствуйте. Верстаю макет, рассчитан для мобильных и планшетов, резиновый временами. Есть такой блок - http://joxi.ru/1A59OwzSKyoyPA . Это вариант для десктопов. Далее для планшетов - http://joxi.ru/V2Ve8MBS0J1DLm . И для мобильных - http://joxi.ru/DrlO1yQc4OMjRA Как будучи в здравом уме и хорошем психическом состоянии сверстать логично, без использования скрытых блоков, типа с заголовком или списком, которые расположены не правильно, как по мне, в планшетной и мобильной версии. Вообще, стоил ли попросить другой дизайн или намекнуть дизайнеру, что он немного не понимает, как верстается из десктопного варианта в мобильные?
-
Не могу решить одну проблему. Как сделать когда браузер увеличивается или уменьшается размер(ширина и высота) изображения не менялся. Как бы он фиксированный. Пример http://mahno.com.ua/en/ (первый блок). У меня с шириной всё нормально, проблема с высотой. Мой пример с проблемой http://davronv4.businesscatalyst.com
-
Делал для себя. Любая аргументированная критика приветствуется. Макет сделан для ширины 1600 и 640. Может подразумевалась фиксированная ширина, но я сделал резину. Для того, чтобы удобнее было смотреть на мобильном, я добавил немного от себя. 1. Модифицировал меню. Оно кликабельное, происходит переход к соответствующим секциям. Возможно стоит совсем убрать Login, Sign up. Они не очень логично смотрятся (?) 2. Главный баннер является одновременно слайдером. Возможно поменяю эффект на fade, а не slide. 3. Главный баннер подстраивает свою высоту под высоту экрана, чтобы сильно не растягивать в высоту страницу. И сразу же заметил ошибку. Если на смартфоне смотреть в альбомном режиме, то баннер сильно обрезается и кнопку "Get Started" не видно вообще. Можно поставить что-то типа min-height : 500px, но не уверен. (?) 4. Все рецепты кликабельны. По нажатию появляется модальное окно со слайдером. Слайдер рабочий, а не двигается он из-за того, что там только одна картинка. На мобильном я убрал эффекты, которые появляются при наведении потому, что с телефона эффект наведения не воспроизвести. 5. В футере добавил кнопку возврата в топ страницы. В мобильном режиме кнопку убрал, чтобы не загромождать пространство. Мелкие косяки, которые еще не успел либо не знал как устранить: - на ширине 640 и меньше, по клику на кнопку выпадающего меню, появляется полоска под кнопкой. Как ее убрать не знаю. - в том же меню на той же ширине, текст "Sign up" съезжает в два ряда. Не знаю почему - блок "Introducing app". При уменьшении экрана, текст наезжает на айфон и становится плохочитабельным. Добавление тени, вокруг текста не помогло - тот же блок. Под надписью "Introducing app" полоска должна располагаться у левого края. - картинки выглядят не очень. Не знаю почему. Изображение айфона немного "надкушенное" снизу, картинки в секции "benefits" тоже выглядят как-то странно (?) Макет : https://www.behance.net/gallery/16951129/FREE-PSD-Multipurpose-Landing-Page Сайт: http://jakeweb.cc.ua/recipes/ Исходники: https://github.com/jakeweb/recipes.git
-
Люди, посоветуйте как лучше поступить. Скрин проблемы http://prntscr.com/a58l7i Пояснение: Есть кастомизированный горизонтальный скрол с которым хорошо работать на компьютере. Нужно его адаптировать под планшеты и смартфоны. Изначально я использовал JQuery плагин custom-scrollbar-master, но в нем есть очень большой косяк, он не поддерживает флик (движение пальцем по телефону) вправо на телефоне. Я пытался найти другие плагины, но все которые мне попадались не поддерживают флик вправо. Ребят, посоветуйте как можно решить такую проблему или может кто посоветует другой плагин?
-
Друзья, добрый день! Помогите, пожалуйста. Нужно сделать респонсив верстку. Вот на этой странице - http://toolbird.com/list/time-tracking-tools/- когда уменьшаешь до размера смартфона, то в теле (в разделе Suggestions) плывут кнопка, минифото, и тайтл с текстом под ним. Надо сделать, чтобы кнопка и фото оставались в одной строке, а тайтл с текстом опускался под них. Спасибо большое!
-
Хочу сделать логотип межу пунктами меню как на изображении http://storage9.static.itmages.ru/i/15/0830/h_1440960187_5020454_95be8f1766.jpg Но не до конца понимаю как это все сделать грамотно. У меня есть два варианта, как это реализовать. <header> <nav> <ul class="navigation"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="/" class="logo"><img src="" alt=""></a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </nav></header><header> <nav> <ul class="navigation"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="/" class="logo"></a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </nav></header>Либо сделать одним из пунктов ссылку и в нее вставить картинку, либо ссылке установить бэкграунд и туда вставить картинку логотипа? Но, что меня больше интересует, как мне это провернуть с адаптивностью? мне по идее надо как вырвать эту ссылку оттуда и поставить перед меню, а оттуда вообще убрать этот `li` с ссылкой на логотип, подскажите как это делаю вообще? на маленький устройствах я бы хотел, чтобы была такая верстка <header> <a href="" class="logo"><img src="" alt=""></a> <nav> <ul class="navigation"> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> <li><a href="#">Пункт меню</a></li> </ul> </nav></header>Или мне надо создать сразу эту ссылку и установить ей свойство "display: none?" и наоборот, но мне кажется это как то глупо
-
http://test1.chpmodul.com.ua/ столкнулся с такой проблемой: сначала сверстал сайт, все было нормально, а потом добавил в него медиа запросы @medai (max-width: 540px) и на интернет эксплорере верстка совсем сломалась. почему это случилось и как исправить?
-
Доброе время суток. У меня есть блок (картинка+ее описание), необходимо, что это было ссылкой. вопрос такой, как правильней огранизовать это? На ум приходят два варианта: 1) <a href="#"> <figure> <img src="img/img.png" alt="описание"> <figcaption>описание</figcaption> </figure></a>2) <figure> <a href="#"><img src="img/img.png" alt="описание"></a> <a href="#"><figcaption>описание</figcaption></a></figure>Но правильно ли это, и если правильно, то какой вариант ближе к истине. Используя первый вариант я вижу, что у меня не ресайзятся изображения почему то, хотя max-width=100% и height=auto для изображений прописано. Но мне кажется первый вариант более логичный, не требуется плодить лишние ссылки, может кто подскажет как правильнее делать? еще я вычитал, что не надо помещать логотип+краткое описание в тег figure, кто что может сказать по этому поводу?
-
Товарищи, перелопатил много менюшек, но не нашел нормального решения ( Требуется многоуровневое меню(2х, 3х-уровневое), адаптивное, скачал одно, разобрался, но на планшете и в телефоне глючит и заедает, другое так же, может есть какое то готовое хорошее решение?
-
Существует несколько методов вывода иконки навигации(три горизонтальных линии) на сайте кто-то просто вставляет png иконку, кто-то делает с помощью border`a, кто-то использует box-shadow, кто-то градиенты, кто-то svg. кто-то псевдо-элементы. я не сильно силен в этой теме, но понимаю, что мне хотелось бы менять, к примеру, цвет иконки в зависимости от цвета фона шапки, поэтому я хотел бы иметь возможность гибко работать с иконкой. Суть вопроса, кто какой метод использует и какие плюсы/минусы разных методов. п.с. Кто-то подключает иконочный шрифт, вопрос такой, имеет ли смысл грузить мобильный трафик подключением этого шрифта ради 1-2 иконок?? или это не особо влияет на скорость загрузки сайта?
-
Господа, есть элементарный сайт визитка, насколько это возможно, на пк все вроде неплохо, без глюков, сделан по принципу mobile first, но на планшете, если нажимать на пункты меню, буквально долисекунды я вижу, как верстка съезжает, это очень напрягает, делал я его флексбоксами, может кто подскажет, что и где и сделал неправильно? Сайт пока находится по адресу anvyd.ru
-
Доброго всем времени суток! Моя первая адаптивная верстка http://www.onetown.hol.es. Макет конечно не очень подходит для адаптивной верстки, но все же...
-
Добрый день, обьясните пожалуйста такие вопросы, пытаюсь делать простенький шаблон : http://comsaaxov.ho.ua/sedona/ возникло пара нюансов: -при изменении размера экрана отступы верхнего меню не уменьшаются (ставил их в %, сейчас стоят px, "col-xs-12 col-sm-12 col-md-12" тоже назначал) -как задавать размеры и отступы при абсолютном позиционировании, что-бы расположение и блока и размеры менялись в зависимости от разрешения экрана?(ну то есть понятно что есть медиа- запросы, но не каждые же 30 пикселей изменения разрешения подправлять положение абсолютного блока?)
-
Всем привет, У меня есть небольщой tab состоящий из двух закладок <div class="widget widget-tabs widget-tabs-responsive"> <div class="widget-head"> <ul> <li class="active"><a href="#tab-general" data-toggle="tab">{"General"|translate}</a></li> <li><a href="#tab-schedules" data-toggle="tab">{"Schedules"|translate}</a></li> </ul> </div> <div class="widget-body"> <div class="tab-content"> <div class="tab-pane animated fadeInUp country_ajaxed" id="tab-general"> <div class="widget-body"> tabGeneral </div> </div> <!-- <div id="tab-general" --> <div class="tab-pane animated fadeInUp country_ajaxed" id="tab-schedules"> <form class="form-horizontal" role="form" method="post"> tab-schedules </form> </div> <!-- id="tab-schedules" --> </div> </div></div>Проблема в том что при открытии страницы виден заголовок 1й и 2й закладок но содержимое 1ой закладки не видно. Если щелкнуть на 2ю закладку и назад на первую то содержимое закладок видимы Не пойму почему сразу при открытии не видно содержимое 1й заакладки? Никакой javascript инициализации для данного таба не нужно ? - я и не делал...
-
Всем привет, собственно вот PSD http://file-up.net/big_5b90a8840b4b78d55d20140521153125.jpg , а вот вёрстка http://agencyyy.besaba.com/ Жду...
-
Не могу сообразить как сделать следующее. Делается в Bootstrap 2.3.2. Имеется картинка монитора, в ней видео(допустим iframe) Есть решения на css-tricks Я пробовал - и получается что либо само видео у меня корректно меняет размер, либо бек. Сейчас сама конструкция выглядит как <div class="video"><iframe width="542" height="305" src="http://www.youtube.com/watch?v=niyFA24H5_E?rel=0&hd=1" frameborder="0" allowfullscreen></iframe></div> .video {width: 542px;padding: 28px 29px 0 54px;height: 485px;float: left;background: url("../images/screen.png") no-repeat 25px 0;} Если добавить враппер под респонсивку такого плана .videoWrapper {position: relative;padding-bottom: 56.25%; /* 16:9 */padding-top: 25px;height: 0; }.videoWrapper iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%; } То возникает проблема с экраном)))) Видео скалится ОК, а картинка режется и падает под видео.... Вобщем, нужно решить задачу: адаптивный бекграунд+видео в отдельно взятом блоке...Если у кого есть рабочий пример - дайте плиз ссылку? Спасибо.
-
Я тут про адаптивный дизайн... Как вы делаете такую штуку: есть элемент .block-item, на 1024 он расположен внутри .header, а при 768px, этот блок переходит в .footer, ну т.е. в совсем другое место. Думаю не редко такое видели, в макетах. Вот и хочется услышать, как такое делается? Понятно конечно, что самое просто это дублировать :-) Т.е. делать 2 элемента, и там и там, и менять у них display: block на none и обратно, но это же не кошерно. Может скрипты какие то есть, для таких манипуляций? А может у jquery есть что то встроенное, решающее этот вопрос двумя строчками? :-) Нашел вот такую штуку intentionjs, но на сколько я понял, там то же самое дублирование. Хотя может я не просек фишку.
-
Достаточно недавно начал изучать CSS-HTML, считаю что в дальнейшем когда выйдет CSS4 и т.д. Возможно многое уже можно будет сделать без JS, на данный момент пока получается вот так. http://codepen.io/Maseone/pen/AgnJo - Собственно DEMO! -
Знаю, что глупый вопрос, но как сделать, чтобы на айфоне\айпаде при масштабировании контента он изменялся по ширине, а не оставался фиксированной ширины. Структура представляет из себя блок с шириной 100%, в нём еще 1 блок с шириной 100%, и в нём еще много блоков с шириной 100%, я так понял, что 100% берётся от размера документа. А нужно от размеров области просмотра. <meta name=”viewport” content=”width=320"> не помогает. Заранее спасибо
-
Добрый вечер, Разрабатываю сайт, одним из основных требований к которому есть адаптивная верстка. Все довольно просто, но есть проблема - на определенной ширине дисплея нужно превращать меню в кастомизированый dropdown. Напрашивается подключение плагина и мониторинг текущей ширины дисплея через js, но кажется, что это решение "с душком". Подскажите, возможно ли реализовать это более "чисто", и если да, то как? Вот меню, над которым оперирую. С уважением, Михась
