Как сделать адаптив для выступающего блока?

Question

[ihabia]

Коллеги, помогите грамотно сделать адаптив. Скинули макет, без каких либо подробностей, делать нужно по бутстрап. Основная часть контента 1140px, но форма выходит за неё вправо. Возможно так нарисовали небрежно, а возможно так задумано, никаких подробностей повторюсь (единственное, чтобы было отзывчиво везде). Но принял решение сделать как на макете.



Я форму сдвинул с помощью position: relative и left
Но, при уменьшении ширины экрана - экран на какое то время (до брейкпоинта) начинает наезжать на форму справа. Пока не пойму как сделать, чтобы форма начала сужаться по достижении правой стороны экрана. На ум пока приходят одни костыли.

Comments

[Михаил]

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

[Erl]

а задать свой media query? под этот момент

[Rustam Bainazarov]

Проверяйте, если есть возможность сдвинуть форму с учётом ширины окна — и двигайте на здоровье, как вам угодно. Это явно либо ошибка, либо фишка для того случая, когда экран позволяет по ширине.

А когда некуда сдвигать — зачем сдвигать? Вот куда и зачем сдвигать на мобильных, если там всё будет впритык? Поэтому вопрос про то, как делать при адаптивности, я не понимаю.

@media (min-width: 1300px) {
 /* Подсчитайте, когда там можно будет сдвигать вместо 1300 px, я их от балды сказал. И сдвигайте */
}

[ihabia]

Рустам Байназаров,

А когда некуда сдвигать — зачем сдвигать? Вот куда сдвигать на мобильных, если там всё будет впритык.

Это понятно, всё что меньше ширины контенера + этот сдвиг, там уже нормально должно идти. В принципе, пока только такая мысль и была, свой медизапрос под это сделать.

[Rustam Bainazarov]

ihabia, в смысле свой? Вы пользуетесь только тем, что даёт Bootstrap? :))

В чём проблема-то в итоге? Вы можете делать калькуляцию с помощью calc, vw и ширины это шняги, чтобы считать отступ плавно. Но это геморрой ненужный. Просто сделайте по принципу, как предложил я, всё прочее — это крайне ненужные телодвижения, на мой взгляд.

[ihabia]

Рустам Байназаров, спасибо буду пробовать ... у меня там не совсем всё по бутстрапу ) я не использую его обертку container, чтобы полностью сделать отзывчивым. Есть максимальная ширина моего контейнера и ширина 100%, без брекпоинтов бутстрапа. Сказали везде отзывчиво, поэтому проверяю уменьшая/увеличивая окно браузера.

Answer 1

[Berkutman]

При помощи тега @media может это сделать. htmlbook.ru/css/value/media

Comments

[Rustam Bainazarov]

Только это не тег, это медиазапрос, и он уже его использует для этого.

Он о другом спрашивает.

Answer 2

[Дмитрий Хватов]

//css 
@media all and (min-height:1000px) and (max-height:3000px){
//код для мобильной версии сайта // здесь можно позиционировать //  всё  по другому 
}

Comments

[Rustam Bainazarov]

Нифига себе «мобильная» версия.

Даже у iPhone XS Max viewport по высоте равен 896px.

[Дмитрий Хватов]

Рустам Байназаров, не знаю , у меня всё работает в хруме , а при min-height:320px и max-height:640 ничего не работает

[Дмитрий Хватов]

Рустам Байназаров, это высота экрана

[Rustam Bainazarov]

Дмитрий Хватов, а можно вас спросить?

Почему у вас типичный медиазапрос опирается на высоту, а не ширину, как у всех других людей?

[Дмитрий Хватов]

Рустам Байназаров, учусь на опыте , а не на статьях

[Rustam Bainazarov]

Дмитрий Хватов, ну коли опыт, то изучите, как работают медизапросы на сайтах: Toster, Stripe, Mvideo. Посмотрите, как построена сетка того же Bootstrap, будь он неладен.

Вы нигде не увидите построение адаптивности по высоте как основной метод. От силы несколько точечных медизапросов будет для специфических правок.

Ваш подход, мягко сказать, нежизнеспособен по целому ряду причин.

[Rustam Bainazarov]

Дмитрий Хватов, а то, что написали вы в ответе, не будет работать практически ни на одном телефоне (я только знаю Sony Xperia 1 длинный такой). Даже у iPad 9.7 высота viewport меньше, чем вы описали в портретном режиме...

Построение адаптивности по высоте — это неправильно.

[Дмитрий Хватов]

Рустам Байназаров, ну ладно , буду знать

[Rustam Bainazarov]

Дмитрий Хватов, смотрите, есть такой сайт:
https://vizdevices.yesviz.com/devices/iphone-xs-max/

Там можно посмотреть, какие размеры viewport есть у устройств.

Вас интересует там вот эта строка:


Почему нам нужен именно размер viewport и почему реальное разрешение нам для верстки не важно — я описал подробно тут:
Как правильно работать с PSD макетами под ретиной?

[Дмитрий Хватов]

Рустам Байназаров, про последние я знаю , но за сайт спасибо . В хруме на компьютере есть что то похожее , где мобильные тесты

[Rustam Bainazarov]

Дмитрий Хватов, просмотрите внимательно, какие там значения. Никаких 1000+ px там не бывает у телефонов по высоте. На данный момент это уникальные, отдельные устройства такую высоту могут иметь.

[Rustam Bainazarov]

Дмитрий Хватов, почитайте тут ветку, там есть про размеры, хоть там мы м обсуждали правильный вектор (ширину viewport):
Как правильно адресовать стили для мобильных телефонов?

[Дмитрий Хватов]

Рустам Байназаров, я тут почитал и понял что можно проверять альбомная ориентация или портретная
orientation: portable ; означает что она портретная

[Rustam Bainazarov]

Дмитрий Хватов, есть, только не portable, а portrait.

Но это тоже не основной метод адаптивности. Плюс, в CSS нет точного метод определения ориентации. Portrait и landscape лишь соотношение ширины к высоте. Когда высота больше ширины — portrait, наоборот — landscape, т. е. без учёта поворот по гироскопу и т. п.

Из-за чего в ряде случаев в реальной портретной ориентации могут срабатывать стили альбомной ориентации.