Сохраняйте правильные пиксели на моей странице с bootstrap 4+ - PullRequest
0 голосов
/ 23 апреля 2020

Я занимаюсь редизайном одного из моих веб-сайтов с использованием bootstrap 4.4.1 и других библиотек, таких как mdb, aos, animate, boxicons, ...

Я не обладаю достаточными знаниями во всех этих веб-разработках. Pl anet, но стремимся сохранить код как можно более чистым. У меня есть очень раздражающая проблема с дополнительными пикселями, добавленными в правой части моей страницы, где я не просил ничего ... (очевидно ..)

Я быстро добавил грязный «обходной путь», чтобы удалить горизонтальная полоса прокрутки и это исправляет ее для большого дисплея, но проблема еще более очевидна на мобильном устройстве, для которого я также удалил возможность горизонтальной прокрутки.

Я просмотрел множество других постов, ссылающихся на аналогичную проблему, и попытался многие из предложенных решений безуспешны, к сожалению ...

Сайт и код можно посмотреть здесь: www.lesrevolins.fr/maquette2/

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

Любая помощь по этому вопросу будет принята с благодарностью!

Приветствия, ElGrapho

РЕДАКТИРОВАТЬ:

Я сделал раздетую версию, которую можно увидеть здесь, где воспроизводится проблема: раздели версия с проблемой (я снял блокировку горизонтальной планки, чтобы ее было лучше видно)

С точки зрения кода это структура вкратце:

<!DOCTYPE html>
<html>

<head>
 // Viewport definition, css inclusions etc..
</head>

<body> 

 <section>
  <div class="container-fluid">
    <div class="row">
     // Standard bootstrap code example for navigation menu
    </div>
  </div>
 </section>

 <section>
  <div class="container-fluid">
    <div class="row">
     // Standard bootstrap code example for carousel
    </div>
  </div>
 </section>

 <section>
  <div class="container-fluid">
    <div class="row">
     // Some basic text using <p></p> on one column and an image on the second column with <img>
    </div>
  </div>
 </section>

 <section>
  <div class="container-fluid">
    <div class="row">
     // Basic call to a parallax effect (from simpleParallax lib)
    </div>
  </div>
 </section>

</body>

Если кто-то знает, что здесь происходит, я хотел бы услышать от этого.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...