Вопросы с меткой [media-queries]

Это часть стандарта CSS, которая позволяет применять стили на основе информации об устройстве, например, о разрешении, о том, что устройство предназначено для печати, и о многом другом.

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

Есть 2 <ul> (списка) по 5 <li> (элементов) в ряд, как их же адаптировать под мобильные устройства в 2 столбца

Есть контейнер, в нём 2 списка с разными классами, но с одинаковыми стилями. Они расположены горизонтально (по 5 штук) на компьютере. .nextSection { width: 90%; } .container { display: flex; ...
Alexey's user avatar
  • 31
0 голосов
1 ответ
12 показов

media запрос в jquery

Подскажите пожалуйста: у меня подключен слайдер через slick на jquery. В обычном размере у меня 3 слайда, при размере экрана в 620px, вместо 3 слайдов у меня должно становится 2 слайда, а при 460px, ...
Дарья's user avatar
0 голосов
0 ответов
22 показа

Почему медиа запросы не работают?

Медиа запросы не работают: <meta name="viewport" content="width=device-width, initial-scale=1"> Стили в правильном порядке. .contact { display: flex; ...
Den's user avatar
  • 1
0 голосов
0 ответов
25 показов

Не срабатывают css стили в медиа-запросе css файла

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> ...
Sergey Babann's user avatar
0 голосов
2 ответа
44 показа

Можно ли удалить из html-тега контент по медиа-запросу

Допустим есть заголовок h1. Для больших экранов содержимое этого тега представляет длинную строку. При уменьшении экрана до мобильной версии, нужно оставить этот тег, но сократить содержимое - сделать ...
TupoScrip's user avatar
0 голосов
0 ответов
26 показов

CSS | Как изменять свойства с помощью media

На данном этапе изучения media запросов, они умеют только что-то присвоить, но не изменить. В данном примере изначально у блока голубой фон, хочу что-бы при приближении он становился чёрным. Но ничего ...
Cadreigich's user avatar
1 голос
1 ответ
45 показов

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

Я изначально верстал сайт с ноутбука, поэтому теперь мне нужно сделать адаптацию под компьютер и остальные устройства. Все видео и статьи которые нашёл в интернете начинали с компьютерной версии. ...
Splashny's user avatar
0 голосов
1 ответ
20 показов

Адаптивные текстовые блоки

У меня есть три текстовых блока, как мне сделать их адаптивными, чтобы при уменьшении экрана до определенного значения блоков становилось меньше? Условно при ширине экрана в 1920 пикселей у меня три ...
Laynie's user avatar
  • 5
0 голосов
0 ответов
26 показов

Как с помощью JS менять стили в брейкпоинтах медиазапроса?

Как с помощью JS менять стили в брейкпоинтах медиазапроса? Конкретно необходимо поменять width объекту только в разрешении 320. Чтобы он не менялся глобально.
Arman Tu's user avatar
0 голосов
0 ответов
6 показов

Material UI: Как переопределить брейкпойнты в пикселях для использования в Grid?

В компоненте Grid можно использовать брейкпойнты, как например здесь: <Grid item xs={12} lg={6}> ... </Grid> По умолчанию эти брейкопойнты равняются: xs, extra-small: 0px sm, small: ...
Олег Верушкин's user avatar
0 голосов
2 ответа
75 показов

Нужно ли писать медиа-запросы для каждого элемента или существуют другие методы?

Пишу тестовый проект для портфолио, сейчас занят адаптацией под мобильные устройства, и вот в процессе встал такой вопрос, неужели мне придется писать тонны кода для медиа-запросов, адаптируя каждую ...
dhelfy's user avatar
  • 148
0 голосов
0 ответов
28 показов

Стандартный браузер Android, не работает адаптивный дизайн

сам я не верстальщик, но попросили поправить верстку. В стандартном браузере Andoid/Mi Browser сайт некорректно отображается. Можете дать совет, как исправить? Сайт interstroynn.ru. CSS: https://...
OlegUP's user avatar
  • 1,188
0 голосов
1 ответ
52 показа

Как сдвинуть элементы в середину при @media screen

Помогите расположить элементы посередине при @media screen and (max-width: 1107px)? Есть блок с карточками, при уменьшении экрана ниже (@media screen and (max-width: 1108px)) последние карточки ведут ...
Kevlar's user avatar
  • 7
0 голосов
0 ответов
7 показов

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

body { background-color: #fff; color: #333; margin: 0; font: 1.2em / 1.2 Arial, Helvetica, sans-serif; } .logo { font-size: 200%; padding: 50px 20px; margin: 0 auto; ...
Kyzlyk's user avatar
  • 1
0 голосов
0 ответов
31 показ

Неправильное отображение сайта на планшете

Делал сайт на заказ и заказчик присылает следущие фото сделаное на планшете Samsung Galaxy Tab A 10.5 SM-T590 с 10 версией андроида: Картинка от заказчика Я начинаю тестить и у меня эта же страница на ...
Misha Ovchar's user avatar
0 голосов
1 ответ
98 показов

не работает медиа запрос, хром игнорирует медиа в наве

тестил похожий код на новом файле, все работало, тут ничего не меняется, в инспекторе код в медиа игнорируется @media screen and (max-width: 580px) { nav{ width: 85%; background: #252b3d; ...
exiltrip's user avatar
0 голосов
1 ответ
716 показов

Пропорциональное изменение изображения при адаптиве

Смотрел видеоурок Адаптивная верстка на 1:39:50-1:43:10. Там изображение менялось с на А хотелось бы чтобы изображение изменялось в размерах как на Пример (см. этот момент @ЕвгенийКулик) на Код ...
wfamilyweb's user avatar
0 голосов
1 ответ
17 показов

@media запросы. Некорректное отображение блока

Столкнулся с такой проблемой. Мне необходимо, чтобы блок скрывался при ширине экрана меньше или равен 767px. А при ширине экрана больше или равен 768px появлялся. Но мой код почему-то не срабатывает. ...
Максим Панов's user avatar
3 голоса
3 ответа
59 показов

Неправильный обработчик в Media запросах JS

Создал скрипт, который работает при ширине экрана 820 пикселей. Данный скрипт при клике переключает цвет второму блоку Block_change, затем когда экран больше 820 пикселей, то цвет блока Block_change ...
Black_Viper's user avatar
  • 1,259
-2 голоса
1 ответ
58 показов

Не могу выбрать медиа запрос

Ку ребятки, начал изучать медиа запросы и наткнулся на два синтаксиса. После этого у меня возник вопрос: В первом способе нету screen, а во втором он есть. Зачем писать screen, как во втором способе, ...
Black_Viper's user avatar
  • 1,259
0 голосов
2 ответа
134 показа

Скрытие сайдбара и заполнение его области

Народ, привет. Есть блок сайдбара и блок контента. Через медиа запрос сайдбар скрывается методом убирания его влево, но основной блок контента остается на своем же месте. Подскажите как сделать, чтобы ...
ramiscoder's user avatar
0 голосов
1 ответ
73 показа

CSS | Как сделать такой макет, используя FlexBox или media-query?

У меня есть изображение, растянутое на весь экран браузера. Мне надо наложить поверх изображения блок с Текстом 1, а также блок с Тексом 2. В зависимости от размера окна браузера, Текст 1 должен ...
Ayla's user avatar
  • 1
0 голосов
1 ответ
59 показов

Не работает скрипт jQuery (на проверку ширины экрана), нужна помощь

Нужно сделать так, чтобы при ширине экрана меньше 992px действие не срабатывало, я прописал код с проверкой ширины экрана, но все ровно скрип работает если уменьшать экран. Если перегрузить страницу ...
Vitaliy's user avatar
  • 341
2 голоса
2 ответа
76 показов

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

Нужно сделать что-то типо медиа запроса css, но только в jQuery. Пробовал много вариантов, но почему-то в один момент анимация просто не работает. Как сделать так, чтобы анимация срабатывала только ...
Vitaliy's user avatar
  • 341
0 голосов
1 ответ
155 показов

Список правил для 1440px не работают для 1920px

Хей! Верстаю сайт под разные размеры начиная от 1440px до 375px. Все шло хорошо, подправлял именно то, что сползает и тп, но когда я вернулся к 1920px обнаружил, что стили не передаются от 1440px ~ ...
Семён Голган's user avatar
0 голосов
0 ответов
88 показов

В браузере FireFox не работает медиа запрос prefers-color-scheme

Я использую актуальную на данный момент версию браузера FireFox 93.0, согласно caniuse браузер поддерживает данный медиа запрос. Но через css @media (prefers-color-scheme: dark) {...} не получается ...
PashaPD's user avatar
0 голосов
1 ответ
44 показа

Ограничение по контрольным точкам

Друзья, всем привет! Подскажите, пожалуйста, при создании медиазапросов, как правильней спроектировать контрольные точки? Часто в сети можно встретить руководства по типу "создаем контрольные ...
Константин's user avatar
0 голосов
2 ответа
51 показ

Почему после окончания действия условия @media-запроса, стиль не возвращается к исходному виду?

Вот сам проект: https://codepen.io/Coder10000000000/pen/NWjjqyb Есть адаптивное меню, пункты выводятся горизонтально ("display:flex") При ширине экрана меньше 1024, меню отображается ...
Unicode101's user avatar
0 голосов
0 ответов
985 показов

Замена CSS свойства gap для Safari?

Сверстал календарь на флексах и гапах. Захожу тестить на сафари, а там гапы просто не работают. Искал в интернете, но не нашел ответа на свой вопрос. Итак, чем заменить gap? Пробовал gap: 1px; -moz-...
Sire IMPACTUS's user avatar
0 голосов
1 ответ
148 показов

не работает @media на одном классе css

есть такой код html <div class="triangle"> <div class="arrow1 down"> </div><div class="arrow2 down"> </div> </div> css .arrow1 { ...
SeRg1o's user avatar
  • 1
0 голосов
1 ответ
63 показа

Браузер увеличивает media запросы css

Запрос на изменение данных css исходит из max-width 1330px. Всё отлично работало во всех браузерах, но как-то заметил, что яндекс браузер увеличивает сам по себе этот max-width 1330px. С чем может ...
Game_one's user avatar
0 голосов
1 ответ
20 показов

Часто ли используются медиа-запросы для черно-белых устройств?

Их везде описывают, но так ли они хорошо работают? Вопрос был задан 7 лет назад. Изменилось ли что-то?
Eva's user avatar
  • 1,859
0 голосов
0 ответов
26 показов

Проблема с медиа запросами в файлах CSS для iPad MINI 2

@media screen and (min-width: 481px) { /* -------------------- HEADER -------------------- */ .HEADER { background: lightcoral; display: flex; flex-flow: row wrap; ...
Sergey Babann's user avatar
0 голосов
0 ответов
23 показа

Странное поведение медиа запросов

Столкнулся со странным поведением медиа запросов. Верстаю страницу desctop-first и пишу медиа от max-width, от большего к меньшему. Однако почему-то один медиа запрос перебивает другой, хотя он ...
Valentine's user avatar
  • 182
3 голоса
1 ответ
62 показа

Текст не исчезает в десктопной версии сайта

При переходе на мобильную версию, должен появляться блок с текстом, а когда переходишь на десктоп версию, как и нужно пропадает блок, но текст при этом остаётся <div class="warn"> &...
realHikkan's user avatar
0 голосов
0 ответов
71 показ

Как скрыть навигацию при уменьшении экрана и оставить иконки?

Home Delivery При уменьшении размера экрана как можно убрать..home и delivery и оставить только иконки fa fa-home ? Display: none пробовала удаляет вместе с иконками
Viktoryia Azaranka's user avatar
1 голос
2 ответа
406 показов

Перезагрузка скрипта при изменении размера окна

jQuery(function($) { const article = $('.article'), nav = $('.aside-menu'), underheader = $('.underheader-fixed'), underheaderHeight = underheader.outerHeight(); // ...
Станислав Стрижаков's user avatar
0 голосов
1 ответ
87 показов

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

Проблема заключается в неправильном размере страницы, а именно navbar при загрузке (ниже фотографии проблемы) В чем может быть проблема? Что бы увидеть проблему, F12 -> Toggle device toolbar -> ...
mega asda's user avatar
  • 455
3 голоса
1 ответ
129 показов

Как сделать два разных задних фона на сайт для смартфонов и ПК?

Всем привет, я новичок в сайтостроении, заканчиваю свой первый сайт, мне осталось только отобразить на главной странице фон с афишей открытия сайта, с ссылкой на бота в телеграм. Заказчик скинул два ...
Руслан's user avatar
3 голоса
1 ответ
67 показов

Как убрать отступ снизу у картинки на устройствах меньше 540px?

Всем привет, я новичок в верстке. Сайт написан при помощи бутстрапа, проблема следующая: У блока с подложкой main_page на устройствах меньше 540, требуется убрать отступ снизу у картинки. Посоветовали ...
Natalia Fed's user avatar
7 голосов
2 ответа
297 показов

Как на определенном медиа-запросе CSS включать нужный кусок JS кода?

Всем здравия! Как мне, например, на @media(max-width: 992px) задействовать определенный кусок JS кода? То есть до 992px у меня работает один код, а после 992px уже другой.
user avatar
2 голоса
1 ответ
104 показа

Не загружать блок в мобильной версии

Есть достаточно длинный лендинг, верстка на bootstrap. На нем есть несколько блоков с изображениями, которые не должны отображаться на экранах < 992px Как сделать чтобы эти блоки вообще не ...
vantal's user avatar
  • 2,668
0 голосов
1 ответ
49 показов

Как определить media запросом девайс, у которого скролл не имеет статичной позиции

Я хочу сделать @media запрос для устройства, у которого нету статичной позиции скролла по ширине. Я не знаю как это гуглится и как это вообще найти. Обычно у телефона может не быть статичного размера ...
Михаил Камахин's user avatar
0 голосов
1 ответ
404 показа

Как реализовать медиа-запрос в js, работающий без обновления страницы

Стоит такая задача: на определенном разрешении экрана мне нужно вставлять блок в html, на другом же его удалять. Вариант с matchMedia не подходит, т.к. он срабатывает после обновления страницы, а мне ...
Den Kravchu's user avatar
0 голосов
1 ответ
247 показов

Медиа запросы относительно размера родительского элемента

Есть изначально полноэкранное адаптивное React-приложение. Потом его, оказалось, надо встроить в сайт. Скорее всего, даже не написанный на React. Для адаптивности React-приложения я использовал ...
witaway's user avatar
  • 909
0 голосов
1 ответ
22 показа

Как обновить div при переходе с мобильного на десктоп?

Как обновить div при переходе с мобильной ширины экрана на десктопную. Под "обновить" я понимаю то, что происходит после нажатия на кнопку обновить страницу в браузере. Может можно это как-то сделать ...
iAndyPC's user avatar
  • 81
1 голос
2 ответа
56 показов

Нужно сделать интересный media запрос в CSS

Есть у меня лендинг и он использует что-то по типу fullpage. При работе с адаптивностью возникла одна проблема, мне нужно, чтобы при расширении 1024x1366(iPad Pro) применялись уже более мобильные ...
YavDen's user avatar
  • 107
0 голосов
1 ответ
25 показов

media-queris проблема с низкими разрешениями

Проблема пустяковая, но всё же очень тормозит процесс. Дело в том, что media-queris на разрешениях экрана до 500px сразу применяются, а media-queris на 320px очень долго или вообще не применяется. В ...
Asen123's user avatar
  • 47
0 голосов
0 ответов
42 показа

Как убрать горизонтальную прокрутку без overflow hidden

Здесь у меня всем элементом которые входит из области я задал display none чтобы проверить не уйдет ли горизонтальная прокрутка но она не ушла в чем может быть дело.Просто это моя первая работа с ...
Tilegen's user avatar
  • 23
0 голосов
1 ответ
150 показов

Адаптивная таблица для телефона и ПК

Есть данная адаптивная таблица для телефона и ПК, из четырех колонок. Все хорошо НО применить CSS не возможно (кроме font-size), так как все сразу ломается. Предложите пожалуйста аналог, НО чтобы ...
Budun's user avatar
  • 97