Вопросы с меткой [адаптивная-верстка]
Процесс форматирования веб-страниц, адаптированных под экраны любых размеров.
590
вопросов
0
голосов
0
ответов
22
показа
Есть ли возможность скрывать куски страниц сайта в мобильной версии не используя CSS?
Подскажите, пожалуйста, есть ли аналог кода
<picture>
<source media="(max-width: 799px)"
srcset="/upload/img1.jpg" width="100%" height="auto">
<...
0
голосов
0
ответов
43
показа
почему не получается выставить margin: авто
Ребят, верстаю адаптивную страницу, есть список карточек, в карточке находиться иконка. Сломала всю голову, но не понимаю почему не получается выставить margin: 14px 14px 0 auto, помогите пожалуйста ...
0
голосов
1
ответ
29
показов
Почему появляется горизонтальный скролл на десктопе
Ширина макета 1366px, задала ширину ограничивающему контейнеру такую же - 1366px (верстаю макет desktop first впервые, до этого верстала только mobile first на курсах, при верстке mobile first нас ...
0
голосов
0
ответов
13
показов
Реальное разрешение окна браузера для верстки мобильной версии сайта
Для верстки мобильной версии сайта использую браузерную эмуляцию мобильных устройств.
Там есть разные устройства с указанным разрешением:
iPhone 4 с разрешением экрана 320х480px;
iPhone SE с ...
0
голосов
0
ответов
18
показов
Не корректное отображение главной страницы при адаптиве, а именно планшеты телефоны
Все привет. Ребят не так давно изучаю верстку и возникла проблема с адаптивностью. Не подстраивается высота под размер экрана устройства. На айпадах почему то высота значительно превышает. Не совсем ...
0
голосов
2
ответа
67
показов
css: адаптивный размер текста (в зависимости от ширины блока)
Есть вот такой код в котором в одной полосе выводится 2 блока.
Задача такая:
левый блок занимает всё место, которое не занимает правый блок (пропусков между блоками нет)
размер правого блока не ...
0
голосов
0
ответов
26
показов
Как реализовать задачу из макета
обучаюсь верстке , возник такой вопрос есть макет: https://www.figma.com/file/rnIAwsECd4Qxltrz2p4NJa/Ветклиника?node-id=0%3A1&t=aPkamyHowD0px2qc-0
В нем имеется блок "История пациентов", ...
0
голосов
0
ответов
23
показа
Не работает @media-запрос
При вёрстке срабатывает @media на первом изображении:
А при открытии сайта на ноутбуке не работает @media-запрос на втором:
Может быть, задаю не правильный @media-запрос. Если так, то подскажите ...
0
голосов
0
ответов
22
показа
Как загрузить нужный контент в зависимости от ширины экрана?
Подскажите пожалуйста как реализовать загрузку определенного контента в зависимости от ширины экрана клиента?
Имеется сайт на бутстрапе, при мобильной версии появляется бургер, все по классике ...
0
голосов
0
ответов
27
показов
Не подстраивается по размер экранов сайт
По какой то причине адаптивный сайт не хочет подстраиваться под размер разных экранов на 1900px и 1280px.
Вернее при размере экрана 1280px экран подстраивается под 1280px, но при размере экрана 1900px ...
0
голосов
0
ответов
19
показов
Как изменить прозрачность на фоновом цвете блока?
Как мне добавить opacity здесь только к фоновому цвету? я пробовал через псевдоэлементы, но они просто перекрывали текст, а если я добавлял opacity к псевдоэлементу, то текст так же становился ...
0
голосов
1
ответ
24
показа
Как адаптировать шапку для мобильной версии?
Как адаптировать только одно изображение шапки под мобильную версию, чтобы не затрагивать другие картинки на сайте?
0
голосов
1
ответ
33
показа
Почему после добавления блоков текст становится без троеточий?
Применяю для первого span стили, чтобы при уменьшении размер экрана текст сокращался:
#SPAN_4 {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
но если я добавлю DIV_2 и DIV_3 ...
1
голос
0
ответов
164
показа
Указание размеров изображения или соотношения сторон вручную - единственный способ избежать скачков вследствие перекомпоновки DOM?
Как я понял из урока по AMP, "вы должны указывать размеры изображения
вручную, потому что если не указывать, будут скачки в потоке документа по мере загрузки изображения":
<amp-img
src=...
0
голосов
1
ответ
22
показа
Как правильно разместить в одном блоке 2 фона?
Не знаю насколько корректен мой вопрос, но в данном случае у меня переход с картинки на фон, при этом действие происходит в одном и том же блоке, как лучше сделать такую штуку и при этом ее ...
0
голосов
1
ответ
30
показов
Как лучше расположить данные элементы?
Как я понял можно в принципе данный блок сделать через абсолютное позиционирование, либо через отрицательные отступы, как будет лучше в данной ситуации? И как лучше адаптировать этот блок под ...
0
голосов
1
ответ
26
показов
Как адаптивно прибить элементы справа?
У меня есть брейкпоинт, когда вместо списка ( см. рис. 1 отображается кнопка с дропдавновской менюшкой, но элементов в данном блоке у меня 3, то есть если б тут был чисто логотип и меню, то да, ...
0
голосов
0
ответов
25
показов
Таблица на сайте
Условия: есть сайт, на котором выложен прайс(реализован с помощью таблицы).
Проблема: при просмотре на компьютере, ноуте, планшете все ОК. При просмотре на телефоне нормально только если посетитель ...
0
голосов
0
ответов
16
показов
Как сделать уменьше блока на слайдере?
Есть swiper slider, на нём есть блок с текстом. При уменьшении разрешения, слайдер уменьшается, а блок нет. Как сделать чтобы при уменьшении разрешения уменьшался и блок с текстом в слайдере? ...
0
голосов
0
ответов
12
показов
Работа атрибутов srcset и sizes
Разбирался с дескриптором ширины атрибута srcset, а также его неотъемлемой частью — sizes. Но по статьям не понял, как вычисляется итоговая ширина изображения.
Формула расчёта следующая:
(фактическая ...
2
голоса
1
ответ
147
показов
Как сделать знак слэш неразрывным?
Можно ли как-то слэш в единицах измерения сделать неразрывным?
Пример, 0,05 мг/л.
0
голосов
1
ответ
52
показа
Правильно ли сделан адаптив данного блока?
И вообще можно ли это назвать адаптивом? Представьте, что я ваш злейший враг и что вам хочется оскорбить каждую мелочь, где я что-то не так сделал. Спасибо
@font-face {
font-family: 'Gilroy-Bold'...
0
голосов
0
ответов
21
показ
Не работают брейкпоинты css
В данном случае не понимаю, почему при срабатывании брейкпоинта Contacts всё равно уходит на другую строчку. Помогите пожалуйста, я только начал верстать, а уже чувствую, что моя душа покидает тело из-...
0
голосов
0
ответов
18
показов
При верстке сайта задний фон располагается на всю ширину экрана, а текст и информация по отношению к фону слишком узко расположены. Что делать?
При верстке сайта задний фон располагается на всю ширину экрана, а текст и вся остальная информация по отношению к фону слишком узко расположены. В итоге чтобы рассмотреть всю информацию на сайте надо ...
0
голосов
2
ответа
74
показа
Вставка видео в <video> без горизонтальных черных полос
Вставил видео 16:9 фоном на сайт свой zasovskiy.ru. вроде все ок. Но когда я меряю размер экрана на планшет, сразу у видео появляются вертикальные черные полосы сверху и снизу.
Как бы мне это видео ...
0
голосов
1
ответ
39
показов
Как расположить текст элемента списка по центру изображения получаемого из псевдоэлемента before?
Текст элемента первого списка состоит из двух строк, остальные из одной. Если бы все состояли из одной, тогда понятно. "Игра" с отступами и/или отступами первого элемента, наверное не то? И ...
-1
голос
1
ответ
41
показ
Подскажите плагин и/или скрипт для Callback виджета и/или вызова всплывающего окна по нажатию "своей" кнопки
Установлены CF 7 и Wpforms, но из коробки вроде нельзя привязать вызов формы по нажатию на "свой" button (гайды устарели, а в JS совсем плох), чтобы, к примеру, запросить у посетителя номер ...
0
голосов
1
ответ
28
показов
Как увеличить отступы между строками таблицы или как-то лучше можно?
Подскажите пжста, как увеличить отступы между строками таблицы до уровня, примерно, равного высоте этих цифр-изображений? И еще, ячейку с "02" не смог поставить ровно, 01 и 03 вроде ...
0
голосов
1
ответ
34
показа
Обрезается и/или не отображается нижняя часть фонового изображения
На планшете и смартфоне отображается плавно, а на десктопе в HD, FullHD нижняя часть "обрезается". Код привести не могу, так как его много, а где кроется суть не знаю. Если менять масштаб в ...
0
голосов
1
ответ
26
показов
width=device-width => fixed element problem
У меня в head правило <meta name="viewport" content="width=device-width">, а у body min-width:400px. Это сделано для того, чтобы на малых экранах просто масштабировалось всё, ...
0
голосов
0
ответов
74
показа
Резиновая вёрстка с помощью font-size: calc(100vw/1440*10)
Нашел на просторах интернета один из способов резиновой вёрстки.
Кто-нибудь может объяснить почему font-size: calc(100vw / 1440 * 10); применяется к каждому значению, будь то блок или шрифт? (Почему ...
0
голосов
1
ответ
205
показов
100vh не занимает всю высоту экрана
использую height со значением 100vh, что, как я понимаю, должно растянуть блок на всю высоту экрана, но этого визуально не происходит (хотя в инспекторе показывает, что занимают всю высоту, как видно ...
0
голосов
0
ответов
11
показов
Качество фотографии при адаптиве сайта
Подскажите пожалуйста. Вставляется изображение на сайт, например ширина блока 700px, если вырезать изображение пиксель в пиксель, оно имеет хорошее качество, если сайт начинает сужаться, т.е. ...
0
голосов
0
ответов
22
показа
Можно ли совместно с justify-content для подгонки к pixel perfect использовать еще margin и padding
Пытаюсь подогнать 3-и элемента к pixel perfect. Задал родительскому блоку header__container в стилях justify-content: space-between, однако после этого логотип не бьется с pixel perfect. Можно ли ...
0
голосов
0
ответов
33
показа
Задание пропорциональных размеров комментария. Отзывчивая верстка
Верстаю макет Webovio. Есть рисунки, используемые при верстке
Наверстал следующее
.techno-articles {
margin-top: 104px;
}
.techno-articles__container {
}
.techno__block_container {
}
.techno-...
0
голосов
0
ответов
22
показа
Как проверить отзывчивость сайта с телефона?
Есть ли какие то сервисы для проверки адаптиве с телефона? Как консоль разработчика
0
голосов
1
ответ
213
показов
Почему появляется горизонтальный скроллбар при height: 100vh;?
появляется горизонтальная прокрутка при выставленном на .container-1 height в 100vh, при значении меньше все нормально. Почему так происходит?
* {
margin: 0;
padding: 0;
}
.wrapper {
...
0
голосов
0
ответов
124
показа
Css адаптив, наложение изображений друг на друга
Не первый раз сталкиваюсь с проблемой наложения картинок друг на друга или спреев типа дыма, пыли, как можно красиво и адаптивно сделать??? Сами понимаете точечная верстка глупо, смотрел варианты и ...
0
голосов
1
ответ
34
показа
Вкладки в стиле Material Design
Делаю для своего проекта фронт.
Дизайн готов.
С вёрсткой проблемы. Уже 3ий день бьюсь с этой шапкой.
Не получается сверстать вкладки, как на Android.
По идее, по дефолту, нужен фиксированный ...
0
голосов
0
ответов
91
показ
расположение блоков при уменьшении разрешения в react
у меня есть компонент котоырй обрабатывает изображения в контейнере
return (
<>
<div className={style.container}>
{paintings.map((item, name, painting) => (
&...
0
голосов
1
ответ
49
показов
Как сделать перенос строки чтобы в данном примере? Чтобы получилось pixel perfect) [закрыт]
Как реализовать pixel perfect в данном случае который в картинке. Как перенести строку?
0
голосов
1
ответ
98
показов
резиновая верстка в scss react
подскажите пожалуйста у меня есть select menu
<div className='select'>
<div
className={style.select__header}
onClick={(e) => setIsActive(!isActive)}
>
...
0
голосов
0
ответов
34
показа
Как это сделать в Landing Page?
у меня вопрос по верстке Landing Page. У меня есть шаблон, в нём есть несколько секций, к которым у меня есть вопрос
Секция 1
Секция 2
Секция 3
Секция 4
У всех этих секций есть кнопка(я выделил их ...
0
голосов
0
ответов
36
показов
Верстка лэндинга. Соблюдение размеров макета и адаптив
Верстаю макет Webovio. Есть следующие рисунки в интересующей части макета
Наверстал следующее
.techno-articles {
margin-top: 104px;
}
.techno-articles__container {}
.techno__block_container {}...
0
голосов
2
ответа
413
показов
Как разместить элементы внутри блока на одинаковом расстоянии
Как разместить элементы внутри родительского блока таким образом, чтобы расстояние между блоками пропорционально изменялось в зависимости от разрешения экрана (проще говоря сетку с товарами - а-ля ...
0
голосов
0
ответов
21
показ
Как реализовать картинку+фон(изображение) сзади неё, чтобы резинились
Изучаю адаптив но не могу ничего придумать в этой ситуации, знаю только флексы. Подскажите надёжный способ установить картинку+фон сзади неё, чтобы резинились + адаптировались. Спасибо заранее
-1
голос
1
ответ
68
показов
Как сверстать такую сетку карточек, вместе с кнопками?
Не получается сделать сетку именно такую, что бы размеры картинок были разные, при этом сохранялось количество элементов в строку.
.parent {
display: flex;
justify-content: flex-start;
flex-wrap:...
0
голосов
0
ответов
72
показа
"Верстальщик с опытом" Кто поможет в получении ответа на критику?
День добрый!
Есть задача (видео) - работодателя.
Есть репозиторий с версткой (с анимацией) - в ответ работодателю.
Есть сопроводительное письмо (от меня) в котором говориться, что работа сделана не до ...
0
голосов
0
ответов
11
показов
Отзывчивый макет
Разбираюсь с типами макетов в верстке. В целом все понятно, кроме одного момента по поводу отзывчивого макета:
Существуют ли в отзывчивом макете заранее определённые брейкпойнты(по аналогии с ...
0
голосов
1
ответ
176
показов
Как адаптивно верстать ios приложение в storyboard?
Посмотрел несколько уроков по адаптации(Auto layout, Constraints), но не понял, как уменьшать шрифт, кнопки и тд. в зависимости от размера экрана.
Если на 11 Айфоне все хорошо влезает, то начиная уже ...