Как сделать одноэкранный сайт на bootstrap?

Question

[DanilaBodrov]

Как сделать одноэкранный сайт на bootstrap 4, чтобы контент не мог вылезти? overflow: hidden не подходит из-за обрезания контекта при масштабировании.

Comments

[zoozag]

Так на маленьких экранах отключайте overflow:hidden, или overflow:auto просто используйте.

По вопросу не совсем понятно что вы пытаетесь сделать.

[DanilaBodrov]

zoozag, одноэкранный лендинг. То есть 1 экран с текстом и формой для заявки.

[Froggyweb]

А как должен вести себя контент при масштабишровании? Не менять размеры, игнорировать что нельзя быть больше экрана?

[DanilaBodrov]

Froggyweb, Должен быть один экран, в нем контент, который меняет размер, но прижат плотно к краям экрана.

[Froggyweb]

Контент не влазит в экран. Поведение?

[DanilaBodrov]

Froggyweb, Не влезает. Не понимаю как адаптировать и чтобы был прижат.

[Froggyweb]

Короче все должно быть красиво и как надо....

[DanilaBodrov]

Froggyweb, Зачем вообще писал?

[Froggyweb]

А ты зачем спрашивал. Как должен вести себя контент если он не помещается ты на простой вопрос можешь ответить. Подсказка появляются скроллы, контент перестраиается. Со вторым вариантом в случае зума есть проблема. Возможно нужно сделать программный зум если есть мелкие элементы. Либо запретить зум (за такое надо руки обрубать).

[DanilaBodrov]

Froggyweb, Нужно сделать, чтобы он вставал в экран монитора ровненько.

[DanilaBodrov]

Froggyweb, А как под квадратный монитор сделать?

[Froggyweb]

:) ты сам не знаешь как надо в требуешь это от браузера
@Froggyweb
Короче все должно быть красиво и как надо....

[Ankhena]

DanilaBodrov, макеты где?
Для десктопа, планшетов и смартфонов причем в 2 ориентациях.

Нет макетов или не понятно как реализовать? Это два разных вопроса соответственно с двумя разными наборами тегов.

И где ваш код, если речь про CSS?

[DanilaBodrov]

Froggyweb, Есть хедер сверху и главный блок. Картинка слева и форма с текстом справа. Картинка меньше блока с формой. Нужно чтобы был один экран без скрола и картинка была у нижнего края постоянно без отступов. Проблема в том, что картинка либо со скролом, либо при квадратном мониторе вообще всё вверх уезжает.

[DanilaBodrov]

Ankhena, Там едь bootstrap, ничего важного в css я не прописывал. Пытался только vw vh

[ⓒⓢⓢ]

Добавь макет и код в описание вопроса.
На вскидку можешь попробовать поиграть с мета тегами.
Если у тебя макет нарисован на 1024пкс, то и укажите 1024 в мета тегах для мобильных устройств, они (мобильные устройства) попытаются сделать зум страницы, чтобы все 1024пкс влезли в рабочую область дисплея ...

[Ankhena]

DanilaBodrov, как узнать что вам нужно разместить и где?

Есть хедер сверху и главный блок. Картинка слева и форма с текстом справа. Картинка меньше блока

Какая картинка, размеры, какая форма, размеры и т.д.
Мы же не телепаты.

Писать за вас заново код на все эти перечисленные выше блоки довольно странно.

[DanilaBodrov]

Ребят, извиняюсь что сразу не скинул. Макет не полный, но суть понятна. Есть девушка и её нужно прибить к полу. Всё это должно быть на одном экране без скрола. Верстка на bootstrap4.

[DanilaBodrov]

И ещё при просмотре на квадратном пузатике контент съезжает вверх. Как адаптировать под квадрат?

[Ankhena]

DanilaBodrov, суперистически! А если экран перевернуть в вертикальный формат, то как это по мнению дизайнера должно выглядеть на одном экране?
А если клавиатура откроется?

Есть девушка и её нужно прибить к полу.

очевидно background-position: bottom

[DanilaBodrov]

Ankhena,
На 720 разрешение он такое сделал

[DanilaBodrov]

Ankhena, Как её приделать к низу и всё это запихнуть во весь экран на bootstrap?

[Ankhena]

DanilaBodrov, я вроде написала, как прибить ее к низу. А зачем вам тут сдался бутстрап вообще не знаю.

Без вашего кода разговор перестает иметь смысл

[DanilaBodrov]

Ankhena, Попросили на бутстрапе. Код самый банальный. Смысл от него? хедер секция с тремя блоками. главная сексия с двумя блоками, в них контент.

[DanilaBodrov]

Ankhena, А что бы не скролилось как сделать?

[DanilaBodrov]

Ankhena, а причем position? картинка ведь не фон. Чуши напороли вы здесь и убежали. Только не нужно опять доказывать, что вы ничего не знаете, а просто решили поумничать.

[Ankhena]

DanilaBodrov, мне ночью с вами сидеть чтоль?

Зачем код?
Предлагаете за вас с нуля сверстать - не хочу, с этим на фриланс. Какие-то детали подправить в сверстанном - вполне.

А по вашему картинка несет смысловую нагрузку? Ну ради бога, делайте картинкой и просто position.

[DanilaBodrov]

Ankhena, Любитель уходить от ответов. Опять куча текста и ничего нужного.

[Ankhena]

DanilaBodrov,
Вы спрашиваете как позиционировать девушку - я вам написала аж 2 разных варианта.
девушка прибитая к низу: https://jsfiddle.net/j831dhn8/
дальше ставите нужную девушку и задаете bg size какой вам там нужен в соответствии с макетами и соотношением сторон.
Хотите картинкой - заменяете на аналогичные свойства для картинок: position, bottom, left, transform и object-fit.

[Ankhena]

DanilaBodrov, даже пусть будет так,с бонусом: https://jsfiddle.net/qwgL3n7m/ :)
добавить свои остальные блоки и перевести бутстрап можете самостоятельно.