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

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

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

Не работает запрос media для телефонов

Делаю медиа-запрос для телефона, а он не работает (должно быть в один столбец, при разрешении от 0 до 600): * { margin: 0; padding: 0; } .container { display: grid; grid-template-columns: ...
Артем's user avatar
0 голосов
0 ответов
26 показов

Media query не работает

Не понимаю почему не видно файлы css и не работают стили на определенной ширине страницы в 767px. Стиль в коде подлючен так: <head> <link rel="stylesheet" href="style....
Vladislav Kalenskiy's user avatar
0 голосов
0 ответов
35 показов

Передача media-правила через iframe

Описание Есть у меня 2 страницы. Так как один из них должен стоять в другом через iframe, обозначим её как дочерний, а другой — родительский. Обеим страницам подключен один и тот же css документ, в ...
eccs0103's user avatar
  • 2,959
0 голосов
1 ответ
66 показов

Здравствуйте, у меня вопрос по поводу адаптивной вёрстки

Я собираю вёрстку, хочу добавить туда возможность адаптации, это нужно сделать с помощью @media? Я уже попытался применить @media однако выходит не правильно. Подскажите, пожалуйста, как исправить, ...
Mmgkgm's user avatar
  • 5
0 голосов
1 ответ
19 показов

Position:fixed не работает при media запросе

Я хочу, чтобы при изменении ширины экрана sticky контейнер, закрепляющийся в верхней части экрана (top:10px), становился fixed и закреплялся в нижней части экрана (bottom:0) Я делаю это через @media ...
Марсель Юлдашев's user avatar
1 голос
1 ответ
25 показов

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

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

media запрос в jquery

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

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

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

Не срабатывают 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 ответа
195 показов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

не работает @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 ответ
80 показов

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

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

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

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

Проблема с медиа запросами в файлах 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 ответов
27 показов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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