Вопросы с меткой [responsive]

Отзывчивый - это тег, обозначающий общий отзывчивый веб-сайт или тему программирования или дизайна веб-приложения. Это более общий тег, чем 'responsive-design', и он служит для ситуаций, когда вы специально пишете о программировании (обычно html/css/js). Само слово 'responsive' относится к способности веб-приложения / веб-сайта реагировать и адаптировать свои размеры и интерактивность в широком диапазоне устройств и размеров экрана.

Фильтрация
Сортировка
Метки
0 голосов
0 ответов
15 показов

Респонсивная верстка шапки

Как правильно сделать респонсивную верстку шапки, чтобы работало как надо? Для десктопа, телефона и планшета? Работаю на Vue.js, но тут дело в стилях, буду очень благодарен, если поможете с этим! CSS +...
Floyzen's user avatar
1 голос
0 ответов
36 показов

Нужно повторение анимации при прокрутке страницы вверх/вниз и устранить некорректные эффекты при наведении курсора (jQuery и CSS)

Здравия желаю! Уже четыре дня занимаюсь этой задачей... Пожалуйста, помогите с решением. Задача: — Если прокручиваем страницу до блока с классом Section-1, то Справа экрана появляется 1-я (красная) ...
V_S's user avatar
  • 11
0 голосов
2 ответа
95 показов

Как сделать чтобы картинка в заголовке уменьшалась, а не пропадала

Основной задумкой есть создание адаптивной таблицы. Которая при уменьшении будет делить каждый свой элемент на маленькую таблицу. Как на скрине ниже. Оригинал: Вид таблицы при маленьком размере окна ...
Alexandr Kruzer's user avatar
0 голосов
1 ответ
52 показа

Адаптивная картина в HTML

Цель следующая - добиться ресайза картинки в меньшую сторону от оригинального разрешения. Я использовал следующий css код: .image { max-width: 100%; height: auto; } Html: <div&...
Alexandr Kruzer's user avatar
0 голосов
0 ответов
23 показа

Перенаправление запросов и ответов

Помогите разобраться с задачей, имеются 3 сервера: А,В,С. А - сервер стороннего домена, который работает у меня в iframe. В - мой сервер, на котором установлен iframe иного сервера А. С - также мой ...
Latinos's user avatar
0 голосов
1 ответ
24 показа

Трёх колоночный макет сайта с прокруткой в среднем блоке

Я делаю pet проект на React и не могу разобраться в том, как сделать хороший 3-х колоночный макет. Я пытался найти ответ в гугле, но не так и не нашёл :( Идея такая: сайт должен состоять из 3 колонок. ...
Evgeny Malkov's user avatar
0 голосов
1 ответ
80 показов

Адаптивное меню CSS HTML

Всем привет, имеется меню которое я хочу сделать адаптивным. Но слова разрываются при уменьшении экрана потому что я использую word-wrap: break-word. Как мне сделать правильное адаптивное меню? Вот ...
WarmingZ's user avatar
0 голосов
1 ответ
26 показов

Взять координаты мыши RESPONSIVE (на разных экранах, в процентах или wv wh)

Подскажите, как правильно по клику взять координаты мыши, привязанных к размеру экрана? например вот на примере кончик конуса имеет разные координаты на десктопе и мобиле. как сделать чтобы на всех ...
user506250's user avatar
0 голосов
0 ответов
20 показов

Как делать Responsive веб сайты?

В общем в теме responsibility я просто 0 и очень бешусь из за этого, так как это мне мешает невероятным образом продолжать работу над сайтами и делать их как нужно, так что хотелось бы попросить кого ...
3DMaX's user avatar
  • 43
0 голосов
0 ответов
97 показов

Как сделать чтобы хедер с position: absolute не прилипал к экрану при сжатии?

На данный момент моя разметка выглядит следующим образом: <header class="header"> <div class="header__inner"> <a href="" ...
Flain's user avatar
  • 1
0 голосов
2 ответа
45 показов

Как расположить картинку по середине

Всем доброго времени суток, долго мучаюсь с этой картинкой, подскажите пожалуйста как сделать так, чтобы картинка расположилась по середине контейнера, как на скрине, из-за того что сталкивается с div'...
Ruslan Makhmatov's user avatar
0 голосов
1 ответ
32 показа

У меня не работает адаптив когда экран считаетсья десктоп, но когда ставлю тип экрана mobile всё работает(с помощю инструмента для верстки в гугле)

html, body { margin: 0; font-size: 15px; } .page-background { position: relative; height: 100vh; margin: 0 auto; background-color: #1F2326; overflow: hidden; display: -ms-grid; ...
Павел Хорольський's user avatar
0 голосов
2 ответа
160 показов

Как сделать так, чтобы высота контейнера была фиксированной, но уменьшалась, если не помещается в окно браузера?

.container { display: flex; width: 200px; height: 300px; border: 1px solid black; } <div class="container"> <div>Hello, world!&...
Kvasimodo's user avatar
2 голоса
1 ответ
28 показов

Как выровнять два линейных градиента?

У меня есть два линейных градиента, один под другим, и я хочу, чтобы они были выровнены и оставались выровненными для всех размеров экрана. Я хочу, чтобы это выглядело так: (так что вы понимаете, что ...
Alexandr_TT's user avatar
-1 голос
1 ответ
55 показов

Add class "active"

$(document).ready(function() { $('.menu__list li').click(function() { if ($('.menu__list li').hasClass('_active')) { $('.menu__list li').removeClass('_active'); $('.menu_body')....
mat's user avatar
  • 103
1 голос
1 ответ
58 показов

Адаптивный Сайдбар, как подстроить по размерам контент?

const btn = document.querySelector('button'); const sidebar = document.querySelector('.sidebar'); btn.addEventListener('click', () => { sidebar.classList.toggle('sidebar--active'); }); body { ...
Кирилл's user avatar
1 голос
1 ответ
36 показов

Помогите с адаптивностью сайта :)

Я не очень разбираюсь в адаптивности, помогите с первой страничкой. Особенно не понимаю, как на мобильных устройствах сделать так, чтобы был только белый квадрат меню. body { padding: 0; ...
zavrik's user avatar
  • 15
5 голосов
2 ответа
848 показов

Адаптивная таблица с HTML-тегами в ячейках

1. Желаемое поведение Положим, имеется такая таблица: Хотелось бы, чтобы на устройствах с небольшой шириной экрана она выглядела следующим образом: То есть слева — thead, справа — tbody. я не знаю, ...
Саша Черных's user avatar
0 голосов
1 ответ
285 показов

Как сверстать footer в данном случае? [закрыт]

Здесь меня интересует навигация. Я вижу, что текст в ней не ограничен, при этом отступ от заголовков (Navigation и т.п.) одинаковый в 160px. Вообще, весь footer я бы верстал так: Создам footer__body ...
Артём Корнеев's user avatar
0 голосов
1 ответ
48 показов

(CSS) Как сделать сетку из строки с тремя элементами?

Я только начинаю изучать секреты flexbox, но не выходит сделать отзывчивую вёрстку блока, в котором есть заголовок, текст и кнопка. Искал информацию, пробовал что можно, но всё ещё остался один и тот ...
Anisimov's user avatar
  • 168
0 голосов
1 ответ
45 показов

Строка поиска и элементы управления (дизайн, css)

Помогите сделать резиновый блок со строкой поиска и дополнительными элементами. Обязательно: Все элементы в одну строку, box2 прижат в право, поле input занимает все оставшееся пространство https://...
MaXX's user avatar
  • 111
0 голосов
1 ответ
111 показов

Правильный адаптив блока со вкладками

Помогите правивльно адаптировать блок. Конкретно с ним какие-то проблемы у меня возникают, всё очень едет стоит поменять разрешения хоть на один пиксель. Не хочется писать медиазапросы под каждый ...
venus's user avatar
  • 5
0 голосов
2 ответа
83 показа

Мне нужно сделать этот макет адаптивным. Как это сделать?

(Я его уже сверстал) Как сделать чтоб при сжатии экрана Navigation прижался к header, related links прижался к footer, а Main занял основную ширину? Понимаю что через медиа запросы, но как?
Somebody's user avatar
2 голоса
1 ответ
63 показа

трапеция. отступ от угла. css. responsive

Есть два блока в форме трапеции. По левому краю от этих двух блоков идет линия под углом. как при адаптиве рассчитать отступ относительно этой линии для обоих блоков, если их высота меняется? Дело в ...
JKaminsky's user avatar
0 голосов
1 ответ
57 показов

Помогите расположить кнопку так

Помогите, не могу поставить кнопку так,position:absolute не помогает
fedasevich's user avatar
0 голосов
0 ответов
119 показов

Задание width для img в процентах

Для достижения "резиновой" верстки задал картинке (svg в img) ширину в процентах (35%). Всё работало отлично в хроме, но на этапе проверки кроссбраузерности обнаружилась проблема в Firefox. Сам расчёт ...
Владимир's user avatar
0 голосов
1 ответ
22 показа

Как корректно вставить на сайт изображение большого размера и задать правильный адаптив, для отображения на маленьких экранах?

У меня в макете 3 картинки размером 767 на 426 пикселей. Как их корректно вставить в код, картинкой или блоком, посредством фона, как адаптировать под маленькие экраны, и они у меня идут в виде ...
Максим Крутов's user avatar
1 голос
2 ответа
1k показов

Адаптивный макет в Qt

На форме есть два verticalLayout и один horizontalLayout, нужно сделать их адаптивными к размеру окна, то есть при изменении его размеров данные элементы должны пропорционально расширяться или ...
Amphyx's user avatar
  • 229
1 голос
0 ответов
38 показов

как тогда работать с инструментами хрома если они врут

/* Start subscriber section*/ .arti-subscribe-section{ position:relative; padding:50px 0px 100px; background-size:cover; background:#333333; } .arti-subscribe-container{ padding: 0 ...
Игорь Артюшин's user avatar
0 голосов
0 ответов
47 показов

Обобщить/Создать сервис с (window, 'resize') | Angular 8

Для реактивного изменения активного html блока для адаптивного интерфейса я использую следующий код <div class="p-0 m-0" *ngIf="!mobileMode"> </div> <div class="p-0 m-0" *ngIf="...
FX_Sektor's user avatar
  • 699
0 голосов
2 ответа
1k показов

Некорректно работает responsive в slick-slider

Всем привет) Хочу сделать чтоб слайдер появлялся при breakpoint 768 и ниже, но responsive работает через раз и когда слайдер все же появляеться, так он виден на всех разришениях. В чем может быть ...
Ania_N's user avatar
  • 57
1 голос
0 ответов
14 показов

IE 11 и респонсивные изображения в Bootstrap 3.3.2

Есть сайт, построен на Bootstrap 3.3.2. Логотип сайта и логотипы внизу страницы неправильных размеров (очень большие). Подскажите куда смотреть, как исправить? <meta http-equiv="X-UA-Compatible" ...
Дмитрий Гвоздь's user avatar
0 голосов
2 ответа
448 показов

Меняется cursor при включении режима различных device в google crome

проблема появилась где-то месяц назад, достала, решил исправить незнаю как, по сути бог с ней, но мне иногда необходимо посмотреть hover эффекты убрались ли на разрешениях экрана <992px, а этот ...
Andrey S's user avatar
  • 446
0 голосов
2 ответа
111 показов

Сделайте этот дизайн фиксированной ширины отзывчивым

Очень прощу помощи, начал изучать фронт - и поймал ступор на этом задании. Мне нужно с помощью flex+float понимания техник, сделать через медиа-запросы такое задание: "Используйте вложенные файлы с ...
Evgeniy Reva's user avatar
-1 голос
2 ответа
172 показа

Медиа-запросы css срабатывают со смещением по ширине

День добрый, в медиазапросах css такого вида min-width: 992px and (max-width: 1023.98px), все прописанные правила работают, но срабатывание сбито по пикселям, например, вместо 768px он срабатывает ...
Aleh's user avatar
  • 1
0 голосов
0 ответов
61 показ

Адаптивность элементов при изменении ширины родителя?

Имеются, к примеру, бутстрап навигации (https://getbootstrap.com/docs/4.1/components/navbar/). Все они адаптивные. Если поместить каждый элемент в отдельный див .demo, то при изменении width этого ...
NArts's user avatar
  • 1
0 голосов
1 ответ
91 показ

Как сделать адаптивность сайта?

Проблема с адаптивностью сайта. Я новичок, поэтому не особо разбираюсь как правильно писать адаптивность. Все работает на определенных размерах экрана, но как только немного уменьшить, сразу все ...
KRCNV's user avatar
  • 3
0 голосов
1 ответ
42 показа

SCSS REM MEDIA QUERIES

В декстопе размер шрифта по дефаулту 16px. Сейчас занимаюсь адаптивом, вопросы следующие: 1. Нужно ли для различных устройств (смартфон,планшет)выставлять font-size у html,body к примеру 12-14px ? 2. ...
user2973432's user avatar
1 голос
0 ответов
50 показов

Как сделать на adaptive разделитель строки на html и css

Есть футер сайта .heart { color: red; margin: 0 12px; } .footer1 { background-color: lime; padding: 10px; margin: 4px; } .footer2 { width: 400px; background-color: ...
Дмитрий Полянин's user avatar
0 голосов
1 ответ
535 показов

Отключение скрипта в мобильной версии сайта

Есть скрипт аудиоплеера, мне нужно чтобы в мобильной версии сайта аудиодорожка заменялась на иконку play/pause, для этого мне нужно отключать этот скрипт. У меня в моем примере все работает как нужно,...
Timur's user avatar
  • 305
0 голосов
0 ответов
196 показов

Позиционирование текста в мобильной версии сайта

Есть слайдер и внутри него текст. В компьютерной версии он отображается так как мне нужно, но в мобильной он съезжает вправо и нижний текст с иконками не могу сделать друг под другом. ....
Timur's user avatar
  • 305
0 голосов
1 ответ
255 показов

добавление картинки через css

у меня есть класс player. мне нужно добавить в него иконку play/pause через css, но когда я добавляю их становится много, css: .player { background-image: url('https://image.flaticon.com/icons/...
Timur's user avatar
  • 305
1 голос
0 ответов
38 показов

создание адаптивного блока

У меня есть блок родительский. Когда я внутреннему блоку даю ширину больше, чем было, то в мобильной версии он съезжает вправо. Как вернуть его на место в мобильной версии? .content-section ....
Timur's user avatar
  • 305
0 голосов
1 ответ
58 показов

Смена аудио дорожки на иконку в мобильной версии

Есть аудиодорожка, мне нужно сменить всю дорожку только на одну иконку play/stop и чтобы аудио включалась по нажатию этой иконки, только в мобильной версии. Я нашел такое решение, но не знаю как ...
Timur's user avatar
  • 305
0 голосов
0 ответов
33 показа

Позиционирование текста в адаптивном блоке

Есть блок с текстом. Мне нужно чтобы текст в нем чуть левее чем есть у меня и в адаптивной версии чтобы не выезжал за рамки. Я написал так: .sliderr__item .slid { display: flex; flex-...
Timur's user avatar
  • 305
0 голосов
0 ответов
131 показ

Как проверить работу min-width/max-width @media на примере iPhone 5 в браузере десктопа?

Разобравшись с тонкостями значения px, встает вопрос о том как проверить верстку с @media в браузере на десктопе. При использовании @media min-width/max-width необходимо указать px(не разрешения, а ...
AndreyMagnificent's user avatar
0 голосов
0 ответов
210 показов

Нет перехода по ссылке при нажатии на картинку

Есть 2 блока. Видео и Фото. В компьютерной версии когда нажимаешь на них, то происходит переход по ссылке, но в мобильной версии этот переход не работает, то есть они не кликабельны. В чем может быть ...
asdas's user avatar
  • 319
-1 голос
1 ответ
951 показ

Блоки друг под другом в мобильной версии

Есть три блока в ряд разной ширины. Как можно сделать их адаптивными, чтобы в мобильной версии они были друг под другом? .watch { float: none; bottom: 0; left: 50px; width: 224px; ...
asdas's user avatar
  • 319
0 голосов
1 ответ
89 показов

Верстка блоков для мобильной версии

Есть 6 блоков которые стоят в столбик. Мне нужно, чтобы в мобильной версии они отображались по 2 блока на каждой строке. То есть всего 3 строки чтобы было. Как это сделать, помогите. Вот код: * {...
asdas's user avatar
  • 319
0 голосов
0 ответов
99 показов

Адаптивные блоки друг под другом

Помогите сделать адаптивные блоки как на этой картинке. Я сделал так: HTML: <div class="container"> <div class="row"> <div class="col-md-6 col-xs-12"> <div class=...
asdas's user avatar
  • 319