@konstantinst13

Почему при скролле до якоря страницу смещает влево?

Всем доброго времени суток!

Столкнулся вот с такой проблемой: Если нажать на голубую кнопку по центру внизу экрана, а в открывшемся меню нажать "Обратная связь", то происходит скроллинг вниз до секции с формой. Страница при этом уходит влево и справа появляется белая полоса. Если полистать наверх, то видно, что выходят за границы блок с id='footer-form' и блок с id='why'... А если сделать вышеописанное мной, а потом в Chrome DevTools удалить эти 2 блока, то страница возвращается в нормальное положение...

Почему так? Ведь я указал для html, body

{overflow-x: hidden !important;}

При этом если просто скроллить мышкой вниз, то всё нормально... Вот ссылка: https://konstantinstepanyan.github.io/landing/

Благодарю за внимание..
  • Вопрос задан
  • 173 просмотра
Решения вопроса 1
YavaDev
@YavaDev
На сколько я понимаю, при переходе к якорю браузер скролит страницу так, что бы элемент с якорем был в верхнем левом углу. Ведь существуют и горизонтальные сайты, а не только вертикальные.
В данном случае вы не понтяно зачем делаете так, что бы форма выходила за пределы окна. И тем более смещаете блок с якорем с помощью марджина. И хотя вы обрезаете с помощью {overflow-x: hidden !important;} обзор пользователю, браузер все равно знает, что вы накостыляли. В этом случае и происходит то, что происходит.
Что бы это пофиксить советую сделать так.
Блоку .footer-form вместо margin-left: 20%; дать padding-left: 20%;
Далее у формы .footer-form .formубрать max-width: 90%;.
В таком случае форма не будет выходить за пределы екрана и будет тянутся на всю ширину.
Ну и дальше уже дописываете стили формы, что бы подогнать по дизайну.

И еще. На большом мониторе инпуты в форме становятся больше и бордер инпута становится кривым. Картинка бордера слишком маленькая.
606d5e0322b07082482296.png
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы