Вопросы с меткой [адаптивная-верстка]

Процесс форматирования веб-страниц, адаптированных под экраны любых размеров.

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

Есть ли возможность скрывать куски страниц сайта в мобильной версии не используя CSS?

Подскажите, пожалуйста, есть ли аналог кода <picture> <source media="(max-width: 799px)" srcset="/upload/img1.jpg" width="100%" height="auto"> <...
Alexandra Felenkovskaya's user avatar
0 голосов
0 ответов
43 показа

почему не получается выставить margin: авто

Ребят, верстаю адаптивную страницу, есть список карточек, в карточке находиться иконка. Сломала всю голову, но не понимаю почему не получается выставить margin: 14px 14px 0 auto, помогите пожалуйста ...
user512090's user avatar
0 голосов
1 ответ
29 показов

Почему появляется горизонтальный скролл на десктопе

Ширина макета 1366px, задала ширину ограничивающему контейнеру такую же - 1366px (верстаю макет desktop first впервые, до этого верстала только mobile first на курсах, при верстке mobile first нас ...
Irina's user avatar
  • 1
0 голосов
0 ответов
13 показов

Реальное разрешение окна браузера для верстки мобильной версии сайта

Для верстки мобильной версии сайта использую браузерную эмуляцию мобильных устройств. Там есть разные устройства с указанным разрешением: iPhone 4 с разрешением экрана 320х480px; iPhone SE с ...
FrontEnder007's user avatar
0 голосов
0 ответов
18 показов

Не корректное отображение главной страницы при адаптиве, а именно планшеты телефоны

Все привет. Ребят не так давно изучаю верстку и возникла проблема с адаптивностью. Не подстраивается высота под размер экрана устройства. На айпадах почему то высота значительно превышает. Не совсем ...
MarkovaE's user avatar
0 голосов
2 ответа
67 показов

css: адаптивный размер текста (в зависимости от ширины блока)

Есть вот такой код в котором в одной полосе выводится 2 блока. Задача такая: левый блок занимает всё место, которое не занимает правый блок (пропусков между блоками нет) размер правого блока не ...
Zhihar's user avatar
  • 37k
0 голосов
0 ответов
26 показов

Как реализовать задачу из макета

обучаюсь верстке , возник такой вопрос есть макет: https://www.figma.com/file/rnIAwsECd4Qxltrz2p4NJa/Ветклиника?node-id=0%3A1&t=aPkamyHowD0px2qc-0 В нем имеется блок "История пациентов", ...
AstRR's user avatar
  • 1
0 голосов
0 ответов
23 показа

Не работает @media-запрос

При вёрстке срабатывает @media на первом изображении: А при открытии сайта на ноутбуке не работает @media-запрос на втором: Может быть, задаю не правильный @media-запрос. Если так, то подскажите ...
Кирилл's user avatar
0 голосов
0 ответов
22 показа

Как загрузить нужный контент в зависимости от ширины экрана?

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

Не подстраивается по размер экранов сайт

По какой то причине адаптивный сайт не хочет подстраиваться под размер разных экранов на 1900px и 1280px. Вернее при размере экрана 1280px экран подстраивается под 1280px, но при размере экрана 1900px ...
Darya Kaano DaryaKaano's user avatar
0 голосов
0 ответов
19 показов

Как изменить прозрачность на фоновом цвете блока?

Как мне добавить opacity здесь только к фоновому цвету? я пробовал через псевдоэлементы, но они просто перекрывали текст, а если я добавлял opacity к псевдоэлементу, то текст так же становился ...
100.1's user avatar
  • 1
0 голосов
1 ответ
24 показа

Как адаптировать шапку для мобильной версии?

Как адаптировать только одно изображение шапки под мобильную версию, чтобы не затрагивать другие картинки на сайте?
 Upiter's user avatar
0 голосов
1 ответ
33 показа

Почему после добавления блоков текст становится без троеточий?

Применяю для первого span стили, чтобы при уменьшении размер экрана текст сокращался: #SPAN_4 { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } но если я добавлю DIV_2 и DIV_3 ...
fiorentina.gf's user avatar
1 голос
0 ответов
164 показа

Указание размеров изображения или соотношения сторон вручную - единственный способ избежать скачков вследствие перекомпоновки DOM?

Как я понял из урока по AMP, "вы должны указывать размеры изображения вручную, потому что если не указывать, будут скачки в потоке документа по мере загрузки изображения": <amp-img src=...
Боков Глеб's user avatar
0 голосов
1 ответ
22 показа

Как правильно разместить в одном блоке 2 фона?

Не знаю насколько корректен мой вопрос, но в данном случае у меня переход с картинки на фон, при этом действие происходит в одном и том же блоке, как лучше сделать такую штуку и при этом ее ...
Костя Гущин's user avatar
0 голосов
1 ответ
30 показов

Как лучше расположить данные элементы?

Как я понял можно в принципе данный блок сделать через абсолютное позиционирование, либо через отрицательные отступы, как будет лучше в данной ситуации? И как лучше адаптировать этот блок под ...
Костя Гущин's user avatar
0 голосов
1 ответ
26 показов

Как адаптивно прибить элементы справа?

У меня есть брейкпоинт, когда вместо списка ( см. рис. 1 отображается кнопка с дропдавновской менюшкой, но элементов в данном блоке у меня 3, то есть если б тут был чисто логотип и меню, то да, ...
Костя Гущин's user avatar
0 голосов
0 ответов
25 показов

Таблица на сайте

Условия: есть сайт, на котором выложен прайс(реализован с помощью таблицы). Проблема: при просмотре на компьютере, ноуте, планшете все ОК. При просмотре на телефоне нормально только если посетитель ...
Юля's user avatar
  • 1
0 голосов
0 ответов
16 показов

Как сделать уменьше блока на слайдере?

Есть swiper slider, на нём есть блок с текстом. При уменьшении разрешения, слайдер уменьшается, а блок нет. Как сделать чтобы при уменьшении разрешения уменьшался и блок с текстом в слайдере? ...
AlexShow's user avatar
0 голосов
0 ответов
12 показов

Работа атрибутов srcset и sizes

Разбирался с дескриптором ширины атрибута srcset, а также его неотъемлемой частью — sizes. Но по статьям не понял, как вычисляется итоговая ширина изображения. Формула расчёта следующая: (фактическая ...
Adam's user avatar
  • 11
2 голоса
1 ответ
147 показов

Как сделать знак слэш неразрывным?

Можно ли как-то слэш в единицах измерения сделать неразрывным? Пример, 0,05 мг/л.
t_alsu's user avatar
  • 33
0 голосов
1 ответ
52 показа

Правильно ли сделан адаптив данного блока?

И вообще можно ли это назвать адаптивом? Представьте, что я ваш злейший враг и что вам хочется оскорбить каждую мелочь, где я что-то не так сделал. Спасибо @font-face { font-family: 'Gilroy-Bold'...
100.1's user avatar
  • 1
0 голосов
0 ответов
21 показ

Не работают брейкпоинты css

В данном случае не понимаю, почему при срабатывании брейкпоинта Contacts всё равно уходит на другую строчку. Помогите пожалуйста, я только начал верстать, а уже чувствую, что моя душа покидает тело из-...
100.1's user avatar
  • 1
0 голосов
0 ответов
18 показов

При верстке сайта задний фон располагается на всю ширину экрана, а текст и информация по отношению к фону слишком узко расположены. Что делать?

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

Вставка видео в <video> без горизонтальных черных полос

Вставил видео 16:9 фоном на сайт свой zasovskiy.ru. вроде все ок. Но когда я меряю размер экрана на планшет, сразу у видео появляются вертикальные черные полосы сверху и снизу. Как бы мне это видео ...
Николай's user avatar
0 голосов
1 ответ
39 показов

Как расположить текст элемента списка по центру изображения получаемого из псевдоэлемента before?

Текст элемента первого списка состоит из двух строк, остальные из одной. Если бы все состояли из одной, тогда понятно. "Игра" с отступами и/или отступами первого элемента, наверное не то? И ...
Otkambinok's user avatar
-1 голос
1 ответ
41 показ

Подскажите плагин и/или скрипт для Callback виджета и/или вызова всплывающего окна по нажатию "своей" кнопки

Установлены CF 7 и Wpforms, но из коробки вроде нельзя привязать вызов формы по нажатию на "свой" button (гайды устарели, а в JS совсем плох), чтобы, к примеру, запросить у посетителя номер ...
Otkambinok's user avatar
0 голосов
1 ответ
28 показов

Как увеличить отступы между строками таблицы или как-то лучше можно?

Подскажите пжста, как увеличить отступы между строками таблицы до уровня, примерно, равного высоте этих цифр-изображений? И еще, ячейку с "02" не смог поставить ровно, 01 и 03 вроде ...
Otkambinok's user avatar
0 голосов
1 ответ
34 показа

Обрезается и/или не отображается нижняя часть фонового изображения

На планшете и смартфоне отображается плавно, а на десктопе в HD, FullHD нижняя часть "обрезается". Код привести не могу, так как его много, а где кроется суть не знаю. Если менять масштаб в ...
Otkambinok's user avatar
0 голосов
1 ответ
26 показов

width=device-width => fixed element problem

У меня в head правило <meta name="viewport" content="width=device-width">, а у body min-width:400px. Это сделано для того, чтобы на малых экранах просто масштабировалось всё, ...
PakuPaku's user avatar
0 голосов
0 ответов
74 показа

Резиновая вёрстка с помощью font-size: calc(100vw/1440*10)

Нашел на просторах интернета один из способов резиновой вёрстки. Кто-нибудь может объяснить почему font-size: calc(100vw / 1440 * 10); применяется к каждому значению, будь то блок или шрифт? (Почему ...
Павел's user avatar
0 голосов
1 ответ
205 показов

100vh не занимает всю высоту экрана

использую height со значением 100vh, что, как я понимаю, должно растянуть блок на всю высоту экрана, но этого визуально не происходит (хотя в инспекторе показывает, что занимают всю высоту, как видно ...
Skait's user avatar
  • 63
0 голосов
0 ответов
11 показов

Качество фотографии при адаптиве сайта

Подскажите пожалуйста. Вставляется изображение на сайт, например ширина блока 700px, если вырезать изображение пиксель в пиксель, оно имеет хорошее качество, если сайт начинает сужаться, т.е. ...
Максим Бриллиант's user avatar
0 голосов
0 ответов
22 показа

Можно ли совместно с justify-content для подгонки к pixel perfect использовать еще margin и padding

Пытаюсь подогнать 3-и элемента к pixel perfect. Задал родительскому блоку header__container в стилях justify-content: space-between, однако после этого логотип не бьется с pixel perfect. Можно ли ...
Андрей Куприянов's user avatar
0 голосов
0 ответов
33 показа

Задание пропорциональных размеров комментария. Отзывчивая верстка

Верстаю макет Webovio. Есть рисунки, используемые при верстке Наверстал следующее .techno-articles { margin-top: 104px; } .techno-articles__container { } .techno__block_container { } .techno-...
wfamilyweb's user avatar
0 голосов
0 ответов
22 показа

Как проверить отзывчивость сайта с телефона?

Есть ли какие то сервисы для проверки адаптиве с телефона? Как консоль разработчика
Ростислав Кальченко's user avatar
0 голосов
1 ответ
213 показов

Почему появляется горизонтальный скроллбар при height: 100vh;?

появляется горизонтальная прокрутка при выставленном на .container-1 height в 100vh, при значении меньше все нормально. Почему так происходит? * { margin: 0; padding: 0; } .wrapper { ...
m17px's user avatar
  • 78
0 голосов
0 ответов
124 показа

Css адаптив, наложение изображений друг на друга

Не первый раз сталкиваюсь с проблемой наложения картинок друг на друга или спреев типа дыма, пыли, как можно красиво и адаптивно сделать??? Сами понимаете точечная верстка глупо, смотрел варианты и ...
Антон Журавлёв's user avatar
0 голосов
1 ответ
34 показа

Вкладки в стиле Material Design

Делаю для своего проекта фронт. Дизайн готов. С вёрсткой проблемы. Уже 3ий день бьюсь с этой шапкой. Не получается сверстать вкладки, как на Android. По идее, по дефолту, нужен фиксированный ...
Leviathan_ZC's user avatar
0 голосов
0 ответов
91 показ

расположение блоков при уменьшении разрешения в react

у меня есть компонент котоырй обрабатывает изображения в контейнере return ( <> <div className={style.container}> {paintings.map((item, name, painting) => ( &...
asdas's user avatar
  • 31
0 голосов
1 ответ
49 показов

Как сделать перенос строки чтобы в данном примере? Чтобы получилось pixel perfect) [закрыт]

Как реализовать pixel perfect в данном случае который в картинке. Как перенести строку?
Arman Tu's user avatar
0 голосов
1 ответ
98 показов

резиновая верстка в scss react

подскажите пожалуйста у меня есть select menu <div className='select'> <div className={style.select__header} onClick={(e) => setIsActive(!isActive)} > ...
asdas's user avatar
  • 31
0 голосов
0 ответов
34 показа

Как это сделать в Landing Page?

у меня вопрос по верстке Landing Page. У меня есть шаблон, в нём есть несколько секций, к которым у меня есть вопрос Секция 1 Секция 2 Секция 3 Секция 4 У всех этих секций есть кнопка(я выделил их ...
VDone's user avatar
  • 46
0 голосов
0 ответов
36 показов

Верстка лэндинга. Соблюдение размеров макета и адаптив

Верстаю макет Webovio. Есть следующие рисунки в интересующей части макета Наверстал следующее .techno-articles { margin-top: 104px; } .techno-articles__container {} .techno__block_container {}...
wfamilyweb's user avatar
0 голосов
2 ответа
413 показов

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

Как разместить элементы внутри родительского блока таким образом, чтобы расстояние между блоками пропорционально изменялось в зависимости от разрешения экрана (проще говоря сетку с товарами - а-ля ...
Антон's user avatar
0 голосов
0 ответов
21 показ

Как реализовать картинку+фон(изображение) сзади неё, чтобы резинились

Изучаю адаптив но не могу ничего придумать в этой ситуации, знаю только флексы. Подскажите надёжный способ установить картинку+фон сзади неё, чтобы резинились + адаптировались. Спасибо заранее
Patrick's user avatar
  • 11
-1 голос
1 ответ
68 показов

Как сверстать такую сетку карточек, вместе с кнопками?

Не получается сделать сетку именно такую, что бы размеры картинок были разные, при этом сохранялось количество элементов в строку. .parent { display: flex; justify-content: flex-start; flex-wrap:...
Никита's user avatar
0 голосов
0 ответов
72 показа

"Верстальщик с опытом" Кто поможет в получении ответа на критику?

День добрый! Есть задача (видео) - работодателя. Есть репозиторий с версткой (с анимацией) - в ответ работодателю. Есть сопроводительное письмо (от меня) в котором говориться, что работа сделана не до ...
Tryd0g0lik's user avatar
0 голосов
0 ответов
11 показов

Отзывчивый макет

Разбираюсь с типами макетов в верстке. В целом все понятно, кроме одного момента по поводу отзывчивого макета: Существуют ли в отзывчивом макете заранее определённые брейкпойнты(по аналогии с ...
Дмитрий Рыжков's user avatar
0 голосов
1 ответ
176 показов

Как адаптивно верстать ios приложение в storyboard?

Посмотрел несколько уроков по адаптации(Auto layout, Constraints), но не понял, как уменьшать шрифт, кнопки и тд. в зависимости от размера экрана. Если на 11 Айфоне все хорошо влезает, то начиная уже ...
Maxim Shpilev's user avatar