Вопросы с меткой [media-queries]
Это часть стандарта CSS, которая позволяет применять стили на основе информации об устройстве, например, о разрешении, о том, что устройство предназначено для печати, и о многом другом.
193
вопроса
1
голос
1
ответ
17
показов
Есть 2 <ul> (списка) по 5 <li> (элементов) в ряд, как их же адаптировать под мобильные устройства в 2 столбца
Есть контейнер, в нём 2 списка с разными классами, но с одинаковыми стилями. Они расположены горизонтально (по 5 штук) на компьютере.
.nextSection {
width: 90%;
}
.container {
display: flex;
...
0
голосов
1
ответ
12
показов
media запрос в jquery
Подскажите пожалуйста: у меня подключен слайдер через slick на jquery. В обычном размере у меня 3 слайда, при размере экрана в 620px, вместо 3 слайдов у меня должно становится 2 слайда, а при 460px, ...
0
голосов
0
ответов
22
показа
Почему медиа запросы не работают?
Медиа запросы не работают:
<meta name="viewport" content="width=device-width, initial-scale=1">
Стили в правильном порядке.
.contact {
display: flex;
...
0
голосов
0
ответов
25
показов
Не срабатывают css стили в медиа-запросе css файла
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
...
0
голосов
2
ответа
44
показа
Можно ли удалить из html-тега контент по медиа-запросу
Допустим есть заголовок h1.
Для больших экранов содержимое этого тега представляет длинную строку.
При уменьшении экрана до мобильной версии, нужно оставить этот тег, но сократить содержимое - сделать ...
0
голосов
0
ответов
26
показов
CSS | Как изменять свойства с помощью media
На данном этапе изучения media запросов, они умеют только что-то присвоить, но не изменить.
В данном примере изначально у блока голубой фон, хочу что-бы при приближении он становился чёрным. Но ничего ...
1
голос
1
ответ
45
показов
Как сделать медиа-запрос адаптации сайта, если я сначала верстал сайт под ноутбук?
Я изначально верстал сайт с ноутбука, поэтому теперь мне нужно сделать адаптацию под компьютер и остальные устройства. Все видео и статьи которые нашёл в интернете начинали с компьютерной версии. ...
0
голосов
1
ответ
20
показов
Адаптивные текстовые блоки
У меня есть три текстовых блока, как мне сделать их адаптивными, чтобы при уменьшении экрана до определенного значения блоков становилось меньше?
Условно при ширине экрана в 1920 пикселей у меня три ...
0
голосов
0
ответов
26
показов
Как с помощью JS менять стили в брейкпоинтах медиазапроса?
Как с помощью JS менять стили в брейкпоинтах медиазапроса? Конкретно необходимо поменять width объекту только в разрешении 320. Чтобы он не менялся глобально.
0
голосов
0
ответов
6
показов
Material UI: Как переопределить брейкпойнты в пикселях для использования в Grid?
В компоненте Grid можно использовать брейкпойнты, как например здесь:
<Grid item xs={12} lg={6}>
...
</Grid>
По умолчанию эти брейкопойнты равняются:
xs, extra-small: 0px
sm, small: ...
0
голосов
2
ответа
75
показов
Нужно ли писать медиа-запросы для каждого элемента или существуют другие методы?
Пишу тестовый проект для портфолио, сейчас занят адаптацией под мобильные устройства, и вот в процессе встал такой вопрос, неужели мне придется писать тонны кода для медиа-запросов, адаптируя каждую ...
0
голосов
0
ответов
28
показов
Стандартный браузер Android, не работает адаптивный дизайн
сам я не верстальщик, но попросили поправить верстку.
В стандартном браузере Andoid/Mi Browser сайт некорректно отображается.
Можете дать совет, как исправить?
Сайт interstroynn.ru.
CSS: https://...
0
голосов
1
ответ
52
показа
Как сдвинуть элементы в середину при @media screen
Помогите расположить элементы посередине при
@media screen and (max-width: 1107px)?
Есть блок с карточками, при уменьшении экрана ниже (@media screen and (max-width: 1108px)) последние карточки ведут ...
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;
...
0
голосов
0
ответов
31
показ
Неправильное отображение сайта на планшете
Делал сайт на заказ и заказчик присылает следущие фото сделаное на планшете Samsung Galaxy Tab A 10.5 SM-T590 с 10 версией андроида:
Картинка от заказчика
Я начинаю тестить и у меня эта же страница на ...
0
голосов
1
ответ
98
показов
не работает медиа запрос, хром игнорирует медиа в наве
тестил похожий код на новом файле, все работало, тут ничего не меняется, в инспекторе код в медиа игнорируется
@media screen and (max-width: 580px) {
nav{
width: 85%;
background: #252b3d;
...
0
голосов
1
ответ
716
показов
Пропорциональное изменение изображения при адаптиве
Смотрел видеоурок Адаптивная верстка на 1:39:50-1:43:10. Там изображение менялось с
на
А хотелось бы чтобы изображение изменялось в размерах как на Пример (см. этот момент @ЕвгенийКулик)
на
Код ...
0
голосов
1
ответ
17
показов
@media запросы. Некорректное отображение блока
Столкнулся с такой проблемой. Мне необходимо, чтобы блок скрывался при ширине экрана меньше или равен 767px. А при ширине экрана больше или равен 768px появлялся. Но мой код почему-то не срабатывает.
...
3
голоса
3
ответа
59
показов
Неправильный обработчик в Media запросах JS
Создал скрипт, который работает при ширине экрана 820 пикселей.
Данный скрипт при клике переключает цвет второму блоку Block_change, затем когда экран больше 820 пикселей, то цвет блока Block_change ...
-2
голоса
1
ответ
58
показов
Не могу выбрать медиа запрос
Ку ребятки, начал изучать медиа запросы и наткнулся на два синтаксиса.
После этого у меня возник вопрос:
В первом способе нету screen, а во втором он есть. Зачем писать screen, как во втором способе, ...
0
голосов
2
ответа
134
показа
Скрытие сайдбара и заполнение его области
Народ, привет. Есть блок сайдбара и блок контента. Через медиа запрос сайдбар скрывается методом убирания его влево, но основной блок контента остается на своем же месте. Подскажите как сделать, чтобы ...
0
голосов
1
ответ
73
показа
CSS | Как сделать такой макет, используя FlexBox или media-query?
У меня есть изображение, растянутое на весь экран браузера. Мне надо наложить поверх изображения блок с Текстом 1, а также блок с Тексом 2. В зависимости от размера окна браузера, Текст 1 должен ...
0
голосов
1
ответ
59
показов
Не работает скрипт jQuery (на проверку ширины экрана), нужна помощь
Нужно сделать так, чтобы при ширине экрана меньше 992px действие не срабатывало, я прописал код с проверкой ширины экрана, но все ровно скрип работает если уменьшать экран. Если перегрузить страницу ...
2
голоса
2
ответа
76
показов
Как сделать проверку изменения ширины экрана на jQuery?
Нужно сделать что-то типо медиа запроса css, но только в jQuery. Пробовал много вариантов, но почему-то в один момент анимация просто не работает. Как сделать так, чтобы анимация срабатывала только ...
0
голосов
1
ответ
155
показов
Список правил для 1440px не работают для 1920px
Хей!
Верстаю сайт под разные размеры начиная от 1440px до 375px. Все шло хорошо, подправлял именно то, что сползает и тп, но когда я вернулся к 1920px обнаружил, что стили не передаются от 1440px
~
...
0
голосов
0
ответов
88
показов
В браузере FireFox не работает медиа запрос prefers-color-scheme
Я использую актуальную на данный момент версию браузера FireFox 93.0, согласно caniuse браузер поддерживает данный медиа запрос.
Но через css
@media (prefers-color-scheme: dark) {...}
не получается ...
0
голосов
1
ответ
44
показа
Ограничение по контрольным точкам
Друзья, всем привет! Подскажите, пожалуйста, при создании медиазапросов, как правильней спроектировать контрольные точки? Часто в сети можно встретить руководства по типу "создаем контрольные ...
0
голосов
2
ответа
51
показ
Почему после окончания действия условия @media-запроса, стиль не возвращается к исходному виду?
Вот сам проект: https://codepen.io/Coder10000000000/pen/NWjjqyb
Есть адаптивное меню, пункты выводятся горизонтально ("display:flex")
При ширине экрана меньше 1024, меню отображается ...
0
голосов
0
ответов
985
показов
Замена CSS свойства gap для Safari?
Сверстал календарь на флексах и гапах. Захожу тестить на сафари, а там гапы просто не работают. Искал в интернете, но не нашел ответа на свой вопрос. Итак, чем заменить gap?
Пробовал
gap: 1px;
-moz-...
0
голосов
1
ответ
148
показов
не работает @media на одном классе css
есть такой код
html
<div class="triangle">
<div class="arrow1 down">
</div><div class="arrow2 down">
</div>
</div>
css
.arrow1 {
...
0
голосов
1
ответ
63
показа
Браузер увеличивает media запросы css
Запрос на изменение данных css исходит из max-width 1330px. Всё отлично работало во всех браузерах, но как-то заметил, что яндекс браузер увеличивает сам по себе этот max-width 1330px.
С чем может ...
0
голосов
1
ответ
20
показов
Часто ли используются медиа-запросы для черно-белых устройств?
Их везде описывают, но так ли они хорошо работают?
Вопрос был задан 7 лет назад. Изменилось ли что-то?
0
голосов
0
ответов
26
показов
Проблема с медиа запросами в файлах CSS для iPad MINI 2
@media screen and (min-width: 481px) {
/* -------------------- HEADER -------------------- */
.HEADER {
background: lightcoral;
display: flex;
flex-flow: row wrap;
...
0
голосов
0
ответов
23
показа
Странное поведение медиа запросов
Столкнулся со странным поведением медиа запросов. Верстаю страницу desctop-first и пишу медиа от max-width, от большего к меньшему. Однако почему-то один медиа запрос перебивает другой, хотя он ...
3
голоса
1
ответ
62
показа
Текст не исчезает в десктопной версии сайта
При переходе на мобильную версию, должен появляться блок с текстом, а когда переходишь на десктоп версию, как и нужно пропадает блок, но текст при этом остаётся
<div class="warn">
&...
0
голосов
0
ответов
71
показ
Как скрыть навигацию при уменьшении экрана и оставить иконки?
Home
Delivery
При уменьшении размера экрана как можно убрать..home и delivery и оставить только иконки fa fa-home ?
Display: none пробовала удаляет вместе с иконками
1
голос
2
ответа
406
показов
Перезагрузка скрипта при изменении размера окна
jQuery(function($) {
const article = $('.article'),
nav = $('.aside-menu'),
underheader = $('.underheader-fixed'),
underheaderHeight = underheader.outerHeight(); // ...
0
голосов
1
ответ
87
показов
Проблема с мобильной версией сайта
Проблема заключается в неправильном размере страницы, а именно navbar при загрузке (ниже фотографии проблемы) В чем может быть проблема?
Что бы увидеть проблему, F12 -> Toggle device toolbar -> ...
3
голоса
1
ответ
129
показов
Как сделать два разных задних фона на сайт для смартфонов и ПК?
Всем привет, я новичок в сайтостроении, заканчиваю свой первый сайт, мне осталось только отобразить на главной странице фон с афишей открытия сайта, с ссылкой на бота в телеграм.
Заказчик скинул два ...
3
голоса
1
ответ
67
показов
Как убрать отступ снизу у картинки на устройствах меньше 540px?
Всем привет, я новичок в верстке.
Сайт написан при помощи бутстрапа, проблема следующая:
У блока с подложкой main_page на устройствах меньше 540, требуется убрать отступ снизу у картинки.
Посоветовали ...
7
голосов
2
ответа
297
показов
Как на определенном медиа-запросе CSS включать нужный кусок JS кода?
Всем здравия! Как мне, например, на @media(max-width: 992px) задействовать определенный кусок JS кода?
То есть до 992px у меня работает один код, а после 992px уже другой.
2
голоса
1
ответ
104
показа
Не загружать блок в мобильной версии
Есть достаточно длинный лендинг, верстка на bootstrap.
На нем есть несколько блоков с изображениями, которые не должны отображаться на экранах < 992px
Как сделать чтобы эти блоки вообще не ...
0
голосов
1
ответ
49
показов
Как определить media запросом девайс, у которого скролл не имеет статичной позиции
Я хочу сделать @media запрос для устройства, у которого нету статичной позиции скролла по ширине. Я не знаю как это гуглится и как это вообще найти. Обычно у телефона может не быть статичного размера ...
0
голосов
1
ответ
404
показа
Как реализовать медиа-запрос в js, работающий без обновления страницы
Стоит такая задача: на определенном разрешении экрана мне нужно вставлять блок в html, на другом же его удалять. Вариант с matchMedia не подходит, т.к. он срабатывает после обновления страницы, а мне ...
0
голосов
1
ответ
247
показов
Медиа запросы относительно размера родительского элемента
Есть изначально полноэкранное адаптивное React-приложение. Потом его, оказалось, надо встроить в сайт. Скорее всего, даже не написанный на React. Для адаптивности React-приложения я использовал ...
0
голосов
1
ответ
22
показа
Как обновить div при переходе с мобильного на десктоп?
Как обновить div при переходе с мобильной ширины экрана на десктопную. Под "обновить" я понимаю то, что происходит после нажатия на кнопку обновить страницу в браузере. Может можно это как-то сделать ...
1
голос
2
ответа
56
показов
Нужно сделать интересный media запрос в CSS
Есть у меня лендинг и он использует что-то по типу fullpage. При работе с адаптивностью возникла одна проблема, мне нужно, чтобы при расширении 1024x1366(iPad Pro) применялись уже более мобильные ...
0
голосов
1
ответ
25
показов
media-queris проблема с низкими разрешениями
Проблема пустяковая, но всё же очень тормозит процесс. Дело в том, что media-queris на разрешениях экрана до 500px сразу применяются, а media-queris на 320px очень долго или вообще не применяется. В ...
0
голосов
0
ответов
42
показа
Как убрать горизонтальную прокрутку без overflow hidden
Здесь у меня всем элементом которые входит из области я задал display none чтобы проверить не уйдет ли горизонтальная прокрутка но она не ушла в чем может быть дело.Просто это моя первая работа с ...
0
голосов
1
ответ
150
показов
Адаптивная таблица для телефона и ПК
Есть данная адаптивная таблица для телефона и ПК, из четырех колонок. Все хорошо НО применить CSS не возможно (кроме font-size), так как все сразу ломается.
Предложите пожалуйста аналог, НО чтобы ...