Блог

У меня есть веб-сайт: www.ribbonhill.co.uk Я пытался удалить пробел справа, который появляется на мобильном телефоне.

Как ни странно, он не отображается в полном режиме как в браузерах Chrome, так и в Edge, но при его небольшом изменении проблема появляется только в Edge, но не в Chrome.

Сайт был создан с использованием Django-oscar и сам по себе не имел никаких проблем.

Я попытался удалить два CSS-файла, но пробелов нет. Эти два файла — ribbonhill.css и w3.css.

При удалении w3.css остается только небольшое пустое пространство, но удаление ribbomhill.css оставляет большое пространство.

Я пытался удалить несколько кодов, но безуспешно.

Я пытался

 @media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

  html,
  body{
    width:100%;
    overflow-x:hidden;
  }

}  

И

 html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}  

Но все еще безуспешно.

Обновление: Отсортировано на мобильных телефонах и Chrome, но edge / internet Explorer показан ниже?! Думаю, я просто оставлю все как есть

Я проанализировал ваш веб-сайт www.ribbonhill.co.uk . Это небольшое несоответствие CSS.

1. Внутри navbar удалите min-width: 400px; логотип для вашего сайта и width:80% это не стандартное входное значение.

Измените свой CSS следующим образом:

.логотип { поле слева: 50%; преобразование: translateX(-50%); минимальная ширина: авто !важно; }

2. Удалите padding: 2rem 0 0; для вашего .footer класса. потому что это влияет на заполнение контейнера.

Это должно быть так:

.нижний колонтитул, footer {заполнение-сверху: 20rem; поле-снизу: 0rem; }