Как решить вопрос с отступом в верстке?

Question

[Ya-Rank]

Добрый день, коллеги!
В верстке новичок и решил освоить bootstrap 4
Сверстал сайт по макету, проверил адаптив через консоль разработчика в хроме и через различные сервисы, но мне говорят, что на iphone 7 справа есть небольшой отступ. Я несколько раз перепроверял верстку, но не нашел ничего. Где я мог допустить ошибку?
Заранее благодарю за ответ!
Верстка test.honeyhey.ru

Comments

[FMars]

Не вижу никаких проблем на сайте, Вы их просили прислать скриншот с проблемой?

Answer 1

[eternalfire]

у body есть min-width: 320px;
это и ошибка

Comments

[Ya-Rank]

а где это нашли?

[Владислав Лысков]

Ya-Rank, вероятно в инспекторе)))

[eternalfire]

[eternalfire]

над адаптивом определённо ещё стоит поработать, там не только в body проблема

[FMars]

eternalfire, а причем тут минимальная ширина к описаной проблеме?

[Ya-Rank]

eternalfire, спасибо! нашел. Я учту ваш комментарий и еще поработаю

[Ya-Rank]

eternalfire, пока не могу сказать решило ли это проблему, но спасибо!
Все же соглашусь с комментом выше, не совсем понимаю причем тут минимальная ширина?
Ну может я конечно чего-то просто не знаю

Answer 2

[TitNIk]

Убери жестко заданную ширину, из-за нее и появляются пустоты. У тебя жестко заданы размеры минимум в двух местах, это в "Преимущества", стиль .feat-text p, форме и еще где-то, пока не нашел. Если хочешь адаптива, не стоит указывать жестко размеры блоков в px, лучше проценты. Если все же требуется указать жестко размер, то стоит указывать медиа, чтобы на мобильных не было проблем, ну и тестировать, чтобы на разных разрешениях не было никаких проблем с отображением.

Comments

[TitNIk]

В общем:
1) К классу .my-input добавить:
max-width: 100%;
2) К .feat-text p, .feat-text2 p при медиа max-width: 768px:
max-width: 350px
вместо width: 350px
3) Уменьшить размер у h1 заголовка, до 24px, например.

@media all amd (max-width: 768px) {
font-size: 24px;
}

P.S В блоке преимущества нужно было наоборот выносить изображение в фон (pos. absolute), а не контент.