Вопросы с меткой [responsive]
Отзывчивый - это тег, обозначающий общий отзывчивый веб-сайт или тему программирования или дизайна веб-приложения. Это более общий тег, чем 'responsive-design', и он служит для ситуаций, когда вы специально пишете о программировании (обычно html/css/js). Само слово 'responsive' относится к способности веб-приложения / веб-сайта реагировать и адаптировать свои размеры и интерактивность в широком диапазоне устройств и размеров экрана.
143
вопроса
0
голосов
1ответ
29 показов
Помогите с адаптивностью сайта :)
Я не очень разбираюсь в адаптивности, помогите с первой страничкой. Особенно не понимаю, как на мобильных устройствах сделать так, чтобы был только белый квадрат меню.
body {
padding: 0;
...
1
голос
0ответов
75 показов
Адаптивная таблица с HTML-тегами в ячейках
1. Желаемое поведение
Положим, имеется такая таблица:
Хотелось бы, чтобы на устройствах с небольшой шириной экрана она выглядела следующим образом:
То есть слева — thead, справа — tbody.
я не знаю, ...
0
голосов
1ответ
42 показа
Как сверстать footer в данном случае? [закрыт]
Здесь меня интересует навигация. Я вижу, что текст в ней не ограничен, при этом отступ от заголовков (Navigation и т.п.) одинаковый в 160px. Вообще, весь footer я бы верстал так:
Создам footer__body ...
0
голосов
0ответов
9 показов
Баг мобильного браузера: при видимом топ-баре не работает переход по ссылкам меню
На экранах max-width: 479.98px сворачивающееся меню открывается на весь экран, и к body добавляется класс lock {overflow: hidden;}. При сворачивании меню класс lock убирается. На эмуляторе маленьких ...
0
голосов
1ответ
21 показ
(CSS) Как сделать сетку из строки с тремя элементами?
Я только начинаю изучать секреты flexbox, но не выходит сделать отзывчивую вёрстку блока, в котором есть заголовок, текст и кнопка. Искал информацию, пробовал что можно, но всё ещё остался один и тот ...
0
голосов
0ответов
119 показов
Универсальная верстка интерфейса на flutter для экранов разного размера
Всем привет, я новичок во flutter, читаю документацию и пробую что либо делать.
У меня есть небольшое приложение. Проблема в том, что на разных экранах оно выглядит по-разному.
ВНИМАНИЕ! Я понимаю ...
0
голосов
0ответов
28 показов
Не выходит отзывчивая верстка
Размер psd макета 1920px, при уменьшении размера экрана к моему (1600px) кнопка ломается.
html
<!-- HEADER -->
<header class="header">
<!-- LOGO -->
<div class=&...
0
голосов
1ответ
22 показа
Строка поиска и элементы управления (дизайн, css)
Помогите сделать резиновый блок со строкой поиска и дополнительными элементами.
Обязательно:
Все элементы в одну строку,
box2 прижат в право,
поле input занимает все оставшееся пространство
https://...
0
голосов
1ответ
95 показов
Правильный адаптив блока со вкладками
Помогите правивльно адаптировать блок. Конкретно с ним какие-то проблемы у меня возникают, всё очень едет стоит поменять разрешения хоть на один пиксель. Не хочется писать медиазапросы под каждый ...
0
голосов
2ответа
69 показов
Мне нужно сделать этот макет адаптивным. Как это сделать?
(Я его уже сверстал) Как сделать чтоб при сжатии экрана Navigation прижался к header, related links прижался к footer, а Main занял основную ширину? Понимаю что через медиа запросы, но как?
2
голоса
1ответ
31 показ
трапеция. отступ от угла. css. responsive
Есть два блока в форме трапеции.
По левому краю от этих двух блоков идет линия под углом.
как при адаптиве рассчитать отступ относительно этой линии для обоих блоков, если их высота меняется?
Дело в ...
0
голосов
0ответов
16 показов
Как активировать горизонтальную прокрутку у блока и не скрывать высоту?
Как на телефоне сделать прокрутку горизонтальную?
`overflow-x: scroll;` не срабатывает.
[jsfiddle][1]
Плюс ко всему выпадающий список прячется, хотя oveflow только по X
[![введите сюда описание ...
0
голосов
1ответ
53 показа
Помогите расположить кнопку так
Помогите, не могу поставить кнопку так,position:absolute не помогает
0
голосов
0ответов
71 показ
Задание width для img в процентах
Для достижения "резиновой" верстки задал картинке (svg в img) ширину в процентах (35%). Всё работало отлично в хроме, но на этапе проверки кроссбраузерности обнаружилась проблема в Firefox. Сам расчёт ...
0
голосов
1ответ
12 показов
Как корректно вставить на сайт изображение большого размера и задать правильный адаптив, для отображения на маленьких экранах?
У меня в макете 3 картинки размером 767 на 426 пикселей. Как их корректно вставить в код, картинкой или блоком, посредством фона, как адаптировать под маленькие экраны, и они у меня идут в виде ...
0
голосов
0ответов
12 показов
Адаптивные виджеты в Android
Как заставить виджет автоматически переноситься вниз, если он не помещается с другим виджетом? Проблема в том, что он просто сжимается вместо переноса
Желаемый результат (Пример того, как виджет ...
0
голосов
2ответа
234 показа
Адаптивный макет в Qt
На форме есть два verticalLayout и один horizontalLayout, нужно сделать их адаптивными к размеру окна, то есть при изменении его размеров данные элементы должны пропорционально расширяться или ...
1
голос
0ответов
36 показов
как тогда работать с инструментами хрома если они врут
/* Start subscriber section*/
.arti-subscribe-section{
position:relative;
padding:50px 0px 100px;
background-size:cover;
background:#333333;
}
.arti-subscribe-container{
padding: 0 ...
0
голосов
0ответов
23 показа
Обобщить/Создать сервис с (window, 'resize') | Angular 8
Для реактивного изменения активного html блока для адаптивного интерфейса я использую следующий код
<div class="p-0 m-0" *ngIf="!mobileMode">
</div>
<div class="p-0 m-0" *ngIf="...
0
голосов
2ответа
461 показ
Некорректно работает responsive в slick-slider
Всем привет) Хочу сделать чтоб слайдер появлялся при breakpoint 768 и ниже, но responsive работает через раз и когда слайдер все же появляеться, так он виден на всех разришениях. В чем может быть ...
1
голос
0ответов
12 показов
IE 11 и респонсивные изображения в Bootstrap 3.3.2
Есть сайт, построен на Bootstrap 3.3.2.
Логотип сайта и логотипы внизу страницы неправильных размеров (очень большие).
Подскажите куда смотреть, как исправить?
<meta http-equiv="X-UA-Compatible" ...
0
голосов
1ответ
24 показа
Меняется cursor при включении режима различных device в google crome
проблема появилась где-то месяц назад, достала, решил исправить незнаю как, по сути бог с ней, но мне иногда необходимо посмотреть hover эффекты убрались ли на разрешениях экрана <992px, а этот ...
0
голосов
2ответа
89 показов
Сделайте этот дизайн фиксированной ширины отзывчивым
Очень прощу помощи, начал изучать фронт - и поймал ступор на этом задании. Мне нужно с помощью flex+float понимания техник, сделать через медиа-запросы такое задание:
"Используйте вложенные файлы с ...
0
голосов
1ответ
58 показов
Медиа-запросы css срабатывают со смещением по ширине
День добрый, в медиазапросах css такого вида
min-width: 992px and (max-width: 1023.98px),
все прописанные правила работают, но срабатывание сбито по пикселям, например, вместо 768px он срабатывает ...
0
голосов
0ответов
51 показ
Адаптивность элементов при изменении ширины родителя?
Имеются, к примеру, бутстрап навигации (https://getbootstrap.com/docs/4.1/components/navbar/). Все они адаптивные.
Если поместить каждый элемент в отдельный див .demo, то при изменении width этого ...
0
голосов
1ответ
71 показ
Как сделать адаптивность сайта?
Проблема с адаптивностью сайта. Я новичок, поэтому не особо разбираюсь как правильно писать адаптивность. Все работает на определенных размерах экрана, но как только немного уменьшить, сразу все ...
0
голосов
1ответ
11 показов
SCSS REM MEDIA QUERIES
В декстопе размер шрифта по дефаулту 16px. Сейчас занимаюсь адаптивом, вопросы следующие:
1. Нужно ли для различных устройств (смартфон,планшет)выставлять font-size у html,body к примеру 12-14px ?
2. ...
1
голос
0ответов
37 показов
Как сделать на adaptive разделитель строки на html и css
Есть футер сайта
.heart {
color: red;
margin: 0 12px;
}
.footer1 {
background-color: lime;
padding: 10px;
margin: 4px;
}
.footer2 {
width: 400px;
background-color: ...
0
голосов
1ответ
291 показ
Отключение скрипта в мобильной версии сайта
Есть скрипт аудиоплеера, мне нужно чтобы в мобильной версии сайта аудиодорожка заменялась на иконку play/pause, для этого мне нужно отключать этот скрипт. У меня в моем примере все работает как нужно,...
0
голосов
0ответов
111 показов
Позиционирование текста в мобильной версии сайта
Есть слайдер и внутри него текст. В компьютерной версии он отображается так как мне нужно, но в мобильной он съезжает вправо и нижний текст с иконками не могу сделать друг под другом.
....
0
голосов
1ответ
87 показов
добавление картинки через css
у меня есть класс player. мне нужно добавить в него иконку play/pause через css, но когда я добавляю их становится много,
css:
.player {
background-image: url('https://image.flaticon.com/icons/...
1
голос
0ответов
32 показа
создание адаптивного блока
У меня есть блок родительский. Когда я внутреннему блоку даю ширину больше, чем было, то в мобильной версии он съезжает вправо. Как вернуть его на место в мобильной версии?
.content-section ....
0
голосов
1ответ
44 показа
Смена аудио дорожки на иконку в мобильной версии
Есть аудиодорожка, мне нужно сменить всю дорожку только на одну иконку play/stop и чтобы аудио включалась по нажатию этой иконки, только в мобильной версии. Я нашел такое решение, но не знаю как ...
0
голосов
0ответов
30 показов
Позиционирование текста в адаптивном блоке
Есть блок с текстом. Мне нужно чтобы текст в нем чуть левее чем есть у меня и в адаптивной версии чтобы не выезжал за рамки. Я написал так:
.sliderr__item .slid {
display: flex;
flex-...
0
голосов
0ответов
84 показа
Как проверить работу min-width/max-width @media на примере iPhone 5 в браузере десктопа?
Разобравшись с тонкостями значения px, встает вопрос о том как проверить верстку с @media в браузере на десктопе.
При использовании @media min-width/max-width необходимо указать px(не разрешения, а ...
0
голосов
0ответов
90 показов
Нет перехода по ссылке при нажатии на картинку
Есть 2 блока. Видео и Фото. В компьютерной версии когда нажимаешь на них, то происходит переход по ссылке, но в мобильной версии этот переход не работает, то есть они не кликабельны. В чем может быть ...
0
голосов
1ответ
465 показов
Блоки друг под другом в мобильной версии
Есть три блока в ряд разной ширины. Как можно сделать их адаптивными, чтобы в мобильной версии они были друг под другом?
.watch {
float: none;
bottom: 0;
left: 50px;
width: 224px;
...
0
голосов
1ответ
49 показов
Верстка блоков для мобильной версии
Есть 6 блоков которые стоят в столбик. Мне нужно, чтобы в мобильной версии они отображались по 2 блока на каждой строке. То есть всего 3 строки чтобы было.
Как это сделать, помогите.
Вот код:
* {...
0
голосов
0ответов
63 показа
Адаптивные блоки друг под другом
Помогите сделать адаптивные блоки как на этой картинке.
Я сделал так:
HTML:
<div class="container">
<div class="row">
<div class="col-md-6 col-xs-12">
<div class=...
0
голосов
0ответов
15 показов
Размещение блоков в конце секции
Есть 3 блока. Как разместить их внизу секции home например? Они в воздухе, не могу их спустить.
CSS:
.col-3-block {
height: 100px;
width: 33.333%; /* Можно задать любую другую ширину блока */
...
0
голосов
1ответ
107 показов
Сдвиг блоков CSS друг к другу
Есть блоки на bootstrap. Мне нужно их сдвинуть друг к другу ближе. Не получается никак сделать:
Вот CSS:
.cnt {
height: 1067px;
padding:20px;
margin-top:20px;
margin-bottom:10px;
background:...
1
голос
2ответа
594 показа
Отображение блоков в мобильной версии
Есть 6 картинки которые стоят в столбик, мне нужно чтобы в мобильной версии они располагались по 2 в каждом ряду.
Но почему-то не работает. Подскажите в чем проблема? как расположить их по 2 в каждом ...
2
голоса
0ответов
86 показов
Responsive верстка
Всем привет! Мне очень редко приходилось заниматься версткой и конкретно CSS, но возникла необходимость сверстать несколько мокапов да и для себя уже хотелось бы наконец-то начать становиться более ...
0
голосов
1ответ
51 показ
Как работает инструмент Responsive в браузере?
У меня есть body с шириной 1910px. Но когда я открываю инструменты разработчика и ставлю там ширину 1910px, я вижу только кусок моей верстки. Почему? Почему пиксели которые я указываю в css не ...
3
голоса
2ответа
72 показа
Позиционирование элементов в bootstrap
Есть 7 картинок. Мне нужно чтобы 5 картинок были в ряд на одной строке а 2 снизу на другой в центре и тоже в ряд. 5 картинок в ряд у меня получилось сделать, но почему-то не получается сделать 2 снизу ...
1
голос
1ответ
108 показов
Свернуть и развернуть текст по нажатию на иконку
Есть текст который в мобильной версии разворачивается по нажатию иконки + и сворачивается по нажатию -. Я добавил 3 точки, но после нажатия на + текст разворачивается и мне нужно чтобы эти 3 точки ...
1
голос
1ответ
2k показов
Выравнивание логотипа по центру меню с названием сайта
Есть вот такой код navbar.
Вот что должно получиться на выходе
Не понимаю как это сделать, выровнял всё по центру, отступ от логотипа 150px влево и вправо.
Меню будет адаптивным, не думаю что через ...
1
голос
1ответ
40 показов
Расстояние от иконки до текста
У меня есть текст, и когда я нажимаю на иконку + он разворачивается, когда на - он сворачивается. Вопрос в том, как сделать отступ сверху, чтобы иконки + и - были чуть ниже, чем текст, и в центре?
Вот ...
4
голоса
1ответ
812 показов
как изменить цвет гамбургера в мобильной версии
Есть сайт на bootstrap 4, как можно изменить цвет этих 3 палок на белый?
Вот html:
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ca-navbar" aria-controls="ca-...
0
голосов
0ответов
17 показов
Замена четырех блоков одним. Анимация
У меня есть анимация из 4 блоков текста. В комп версии все работает как надо(там 4 блока), но в адаптивной версии мне нужен только один блок текста сменяющийся на другой через определенное время. ...