Как убрать горизонтальный скролл в html

Question

Accepted Answer

Для устранения горизонтального скролла в HTML можно использовать несколько подходов:

CSS свойство overflow-x: hidden для тега body или для конкретного контейнера, который вызывает появление скролла.

body {
  overflow-x: hidden;
}

Ширина контейнера. Можно уменьшить ширину контейнера, чтобы он соответствовал ширине экрана и не вызывал появление скролла.

.container {
  width: 100%;
  max-width: 1200px; /* например, максимальная ширина контейнера */
  margin: 0 auto; /* центрирование */
}

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

@media screen and (max-width: 768px) {
  .container {
    width: 100%;
    max-width: 100%;
  }
}

В зависимости от конкретной ситуации, можно использовать один или несколько из перечисленных выше подходов.

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