Вопросы с меткой [адаптивная-верстка]
Процесс форматирования веб-страниц, адаптированных под экраны любых размеров.
498
вопросов
1
голос
1ответ
31 показ
Динамическое изменение элементов сайта
Есть небольшая проблема. На сайте задана динамическая высота для сайдбара и контента. Соответственно как только в контенте или сайдбаре появляется содержимое они увеличиваются. Если в сайдбаре больше ...
1
голос
1ответ
13 показов
Позиционирование элементов относительно друг друга с учетом адаптивности
Есть инпут, внутри которого справа в конце кнопка (здесь зеленый квадратик). По условиям инпут должен выступать за свой блок, поэтому задаю ему ширину 120% (или аналогично в vw). Проблема такая - при ...
0
голосов
1ответ
60 показов
Адаптивная шапка HTML/CSS
Делаю адаптивную шапку, вроде что-то выходит... Но застрял на одном моменте: при уменьшении ширины экрана, когда край экрана доходит до последней ссылки, то последняя ссылка просто перескакивает вниз:
...
4
голоса
4ответа
109 показов
Как сделать вращаемый регулятор громкости
Такой вопрос
Есть в дизайне блок который должен выглядеть вот так
кнопки которые я там отметил - должны анимироваться. если с кнопкой слева проблем особых с анимацией нажатия я не вижу, то вот кнопка ...
-3
голоса
1ответ
31 показ
Кто может помочь адаптировать страницу на сайте?
не очень понимаю как работают меда запросы, может кто-то сможет помочь
body {
padding: 0;
margin: 0;
color: black;
font-size: 16px;
font-family: FuturaBookC;
}
h1, h2, h3, h4, ...
0
голосов
0ответов
25 показов
При 1024пх из-за бургера появляется горизонтальный скролл! Как исправить?
При 1024пх и ниже из-за бургера появляется горизонтальный скролл! Как исправить?
https://roderen.github.io/onegin/
2
голоса
1ответ
31 показ
Способы добавления картинки в html под различные разрешения экрана и влияние на скорость загрузки страницы
Таким образом я доабавляю картинку с адаптацией под различные экраны:
Вопрос: загружаться на устройство при открытии страницы из них будет будет только одна? Или сразу все? Потому что все эти ...
2
голоса
2ответа
187 показов
Как просмотреть локальный сайт на телефоне?
Я сделал сайт и адаптировал его под все устройства, но он, как вы понимаете, только на компе. (и в гите) На хостинг заливать буду позже.
Вопрос: Как мне открыть свой сайт на телефоне (пощупать, ...
1
голос
1ответ
54 показа
Пропадает фоновое изображение при уменьшении масштаба
Верстаю резиновый+адаптивный сайт. В качестве фона установлена картинка в одном из флекс элементов.
При уменьшении масштаба было все нормально, но после появления медиа запроса max-width 800px { flex-...
0
голосов
1ответ
54 показа
Должен ли сайт так растягиваться после ширины 1920px?
Если так не должно быть, то напишите как должно и как решить.
Сайт
репозиторий
На всякий случай сам макет
Может контейнер для всего контента сделать?
В макете главная страница 1779px (как это делали), ...
0
голосов
0ответов
11 показов
Использование initial-scale=0.8 для адаптивной верстки
Вопрос в использовании вьюпорта с масштабом 0.8 - (meta name="viewport" content="width=device-width, initial-scale=0.8")
Делаю простые статичные сайты, обычно контент в контейне ...
2
голоса
1ответ
48 показов
Адаптивная Верстка - помогите с практикой [закрыт]
Изучил более менее Html & css, практиковался на статичных сайтах. Теперь хочу начать изучать адаптивную верстку. Перечитал пару десятков сайтов об этом, и до меня плохо доходит. Может, кто скинуть ...
1
голос
2ответа
74 показа
Полноценный эмулятор мобильного браузера
Столкнулся с такой проблемой, мой веб-проект на Vue отлично работает в консоле разработчика хрома в режиме эмулятора мобилок. Когда зашёл с реального устройства, половина функционала не работало, как ...
1
голос
1ответ
52 показа
Адаптация трехколоночного макета на flexbox
Прошу помочь разобраться а адаптацией стандартного трехколоночного макета с основным блоком в центре и двумя сайдбарами по бокам: https://jsfiddle.net/jkps6ugq/, размеры блоков фиксированные.
...
0
голосов
0ответов
30 показов
Не получается подогнать верстку под шаблон
Пытаюсь сверстать этот блок
По дизайну изображение занимает примерно 50% экрана. Сохраняя размеры изображения, шрифты и прочее из дизайна сверстал.
В итоге у меня получается какой-то сильно большой ...
0
голосов
1ответ
30 показов
Как сделать фон адаптивным?
Здраствуйте! Суть проблемы: при верстке сайта нужно, чтобы фон корректно отображался на всех устройствах, но при адаптивной верстке у меня фоновое изображение имеющее размеры 1920х1080 получается ...
0
голосов
0ответов
14 показов
При размерах меньше 400px появляться пробел, помогите
Html код `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Waxom</title>
<link rel="stylesheet" href="/css/...
-3
голоса
1ответ
23 показа
Как сделать адаптивный фон? [закрыт]
На странице резкий переход от черного фона в белый, на черном фоне белый текс и при сжатии текст сжимается, а фон нет и получается так, что белый текст на белом фоне.
0
голосов
1ответ
35 показов
Помогите сделать шапку адаптивной
Пытаюсь сделать шапку адаптивной ,но что-то идёт не так. Текст друг на друга наезжает .У navbar-collaps при сжатие и открывание панели меню цвет фона не устанавливается и т.д.
* {
margin: 0;
...
0
голосов
0ответов
30 показов
Создание адаптивного меню навигации в сетку 2×2
У меня есть навигационное меню которое надо сделать адаптивным
Само меню состоит из 4 кнопок, и мне нужно что бы они перестраивались в сетку 2 на 2
Так же присутствуют отступы
Слева и справа = 30%
...
1
голос
1ответ
25 показов
Как растянуть submenu на всю ширину окна если есть контейнер?
Нужно растянуть подменю на всю ширину окна, которое появляется при наведении на один из элементов меню. Само меню обернуто в контейнер. Первое что приходит в голову это добавить псевдоэлемент для ...
0
голосов
1ответ
620 показов
Проблема в шрифте, Montserrat на ПК и андроид выглядит нормально, на Safari Он меняет стиль
Здесь как он должен выглядеть https://prnt.sc/uvzw6l, а так он отображается на айфоне 6s+ https://prnt.sc/uvzwwb
Кто сталкивался с такой проблемой?
1
голос
0ответов
19 показов
Изображение Background располагается не правильно
помогите пожалуйста: при дальнейшем уменьшении маштаба, данное изображения также начинает уменьшаться непропорционально экрану, что делать?
(Весь код по изображению на нижней части скрина)
0
голосов
0ответов
28 показов
Safari каким то образом выделяет input, с учетом того что border: none
У input есть border-radius, но он никаким образом на это не влияет.
Данного цвета вообще нет на сайте. И такая проблема возникает только на iphone.
Кто-то сталкивался с этим?
0
голосов
1ответ
59 показов
Как закрепить слайдер на место?
Делаю слайдер и при уменьшении масштаба страницы, слайдер едет вправо. Не понимаю как его закрепить.Слайдер slick.js. Пробую display: inline-block; Не получается, возможно подскажите как правильно его ...
3
голоса
2ответа
94 показа
Почему не работает адаптивная вёрстка на телефоне?
Учусь писать сайты, узнал как делается адаптивная вёрстка, но на телефоне она не работает:
@media (min-width: 570px) {
body {
background-color: chocolate;
}
#content {
text-align: ...
2
голоса
1ответ
86 показов
Проблема slick-slider, ломает верстку
Как вообще адаптируются такие ситуации? Просто слайдер ломает блок, и текст ломается также. Я в маленьком ступоре подскажите что можно сделать.Блок просто уходит в право, и не при каком уменьшении это ...
0
голосов
1ответ
38 показов
Как в bootstrap решена задача адаптирования сетки в зависимости от доступной ширины родителя (а не от ширины виюпорта)?
Не собираюсь изучать Bootstrap, но одно мне из него интересно.
Допустим мы определили, сколько конкретный компонент должен занимать колонок на маленьких, больших и средних экранах, а из обновлённого ...
0
голосов
1ответ
26 показов
Правильная верстка адаптивного блока
Необходимо сверстать блок и в тоже время растянуть левую картинку на всю ширину от центра(50%) и также текст в рамках сетки. Как это правильно сделать? Я подумывал сделать на флексах фоны в блоке по ...
0
голосов
0ответов
17 показов
Проблема с адаптацией экрана при включении “версии для ПК” в мобильном браузере
Делаю сайт для себя. Решил делать адаптивный сайт с перераспределением элементов по запросу @media для разных разрешений экрана. Проблема выявилась при просмотре сайта на мобильном устройстве и только ...
0
голосов
0ответов
31 показ
Проблема с background фоновым изображением
<body>
<header class="welcome">
<div class="container-fluid">
</div>
</header>
@import "nullstyle.scss";
.welcome {
height: ...
0
голосов
0ответов
11 показов
Как вставить две картинки в picture>sourse при разрешение 480px?
Как вставить две картинки в picture>sourse при разрешение 480px
<picture>
<source srcset="img/480px/img-mission-mobile-01.svg" media="(max-width: 480px)">
...
0
голосов
3ответа
108 показов
Как сделать замену изображение при адаптации?
Здраствуйте!
Делаю сайт и нужно чтобы изображение заменялось на другое изображение.
Возможно ли это?
0
голосов
0ответов
36 показов
Вопрос по верстке
Как сделать чтоб при сплющивании окна блоки сначала занимали место отступов справа и слева и только потом сплющивались а не так как на картинке. Пробовал делать не через маржины а просто через лефт ...
0
голосов
1ответ
22 показа
Как убрать перенос текста под иконку?
Как сделать позиционирование текста относительно первой буквы в абзаце ? ?
нужно, чтобы текст во второй и тд строках начинался под 1 буквой 1 слова
вот мой код
<!DOCTYPE HTML PUBLIC "-//W3C//...
0
голосов
0ответов
25 показов
Адаптивный дизайн на ejs в node
Node.js выводит результаты через index.ejs в views, как сделать разные шаблоны для мониторов и телефонов, если к приложению у меня доступа нет?
1
голос
1ответ
28 показов
Проблема с адаптивной версткой сайта, высота
Делаю адаптивную верстку сайта, на телефоне оказывается, что высота девайса меньше высоты окна браузера, и часть сайта не видна под блоком браузера (можно увидеть на фото). Как сделать чтобы высота ...
0
голосов
0ответов
16 показов
Как активировать горизонтальную прокрутку у блока и не скрывать высоту?
Как на телефоне сделать прокрутку горизонтальную?
`overflow-x: scroll;` не срабатывает.
[jsfiddle][1]
Плюс ко всему выпадающий список прячется, хотя oveflow только по X
[![введите сюда описание ...
0
голосов
1ответ
29 показов
Синтаксис css кода
Прочел https://habr.com/ru/company/pechkin/blog/256853/ и столкнулся с таким кодом
table[class=contenttable] {
width:320px !important;
}.
Что за синтаксис тег[class=contenttable] (...
0
голосов
1ответ
23 показа
Размеры мобильного экрана для адаптивного приложения
Для задания на https://www.figma.com/file/5rXv5Q5Jw4auNDZMEsxvD3/%D0%A2%D0%B5%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B5-%D0%B7%D0%B0%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5-%D0%B4%D0%BB%D1%8F-%D0%92%D0%B5%D1%80%D1%81%...
0
голосов
1ответ
28 показов
Нецелое число пикселей при верстке
Как задать размер элемента при написании html-кода в нецелое число пикселей, а именно в целое число и бесконечную десятичную дробь (например, (100/3)%)?
0
голосов
1ответ
21 показ
Задать три фоновых картинки и их стиль
У страницы есть 3 фоновых картинки: самая верхняя , средняя, и нижняя. Первая картинка должна всегда полностью отображаться на экране - растягиваться под размер окна. Вторая и третья обрезаться (...
0
голосов
0ответов
5 показов
Адаптивность сайта величинами vh и vw
Как будет выглядеть сайт на больших мониторах от 2600px+ если при создании сайта все величины указывать в vh vw?
1
голос
1ответ
82 показа
Относительное позиционирование + адаптивность
Как можно убрать смещение блока, который позиционирован относительно другого блока примерно по центру?
С уменьшением экрана он двигается влево, я уже день пробую разные способы, ничего не нашел пока ...
0
голосов
1ответ
29 показов
Bootstrap адаптивность
ПРи использовании бутстрепа при просмотре с мобильного блоки слипаются, код привожу ниже, подскажите, пожалуйста.
https://i.stack.imgur.com/5bn9D.jpg
<!doctype html>
<html lang="en"&...
0
голосов
0ответов
41 показ
Из-за чего могут быть такие большие отступы при просмотре с мобильного? Появляются после добавления meta тега “viewport”
Есть такой тег для работы с мобильными устройствами:
Когда его прописываю, у меня огромные отступы справа. Не знаю, из-за чего, ведь фиксированной ширины у меня нигде нет, только высота одна есть ...
0
голосов
1ответ
41 показ
Как отобразить ромб при адаптивной верстке
**Нужно сверстать чтобы не было отступа справа в toggle device toolbar (емулятор устройств) из за ромба. Вне toggle device toolbar отступа нет и часть ромба уходит вправо неотображаясь **
<...
0
голосов
0ответов
70 показов
Задание width для img в процентах
Для достижения "резиновой" верстки задал картинке (svg в img) ширину в процентах (35%). Всё работало отлично в хроме, но на этапе проверки кроссбраузерности обнаружилась проблема в Firefox. Сам расчёт ...
1
голос
0ответов
29 показов
Размеры экранов для адаптивной верстки jQuery?
эксперты!
Имеется следующий код для оптимизации адаптивной верстки:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
...
0
голосов
1ответ
94 показа
Не работает тег viewport
Не могу понять, в чем причина. Не первый сайт верстаю, да и не сайт, так, заказчику хотел показать пример калькулятора на его сайт.
При сужении окна браузера контент не адаптируется, а масштабируется, ...