Как избавиться от пробелов в Html Страница просмотра с Android телефона?

Question

Мой сайт выглядит хорошо из компьютерных браузеров, я пробовал все разные браузеры, все они выглядят так, как я хотел. Но когда я попробовал это из браузера Chrome моего телефона Samsung Galaxy, что-то не так. На моей странице чередуются синие и белые разделы, в браузере мобильного телефона синие разделы обрезаны с правой стороны, оставлены пробелы [это должно быть полностью вправо], но теперь это выглядит так :

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

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

Сайт находится по адресу: https://gatecybertech.com

Answer 1

Существует несколько способов исправить это.

Удалить пробел с помощью CSS

Чтобы просто удалить пробел, вы можете добавить

body {
    background: #yourcolor;
}

Сделать изображение отзывчивым

Как бы я ни предложил установить ширину вашего изображения с размером в vw. Это сделает ваши изображения отзывчивыми.

Вы также можете сделать то, что говорит ответ ниже, и использовать SVG или медиа-запросы, но я протестировал использование размера в vw и обнаружил, что он работает просто отлично

Приложение

Вот как вы можете установить ширину ваших изображений с помощью vw

#yourimageid {
   width: 2vw;
   height: auto;
}

Надеюсь, это помогло!

Answer 2

Проблема заключается в нескольких ваших изображениях.

например, сначала изображение Теда Мерфи, а затем рамка затвора .png image

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

Что вы можете сделать?

1. использовать изображения .svg, поэтому они будут изменяться в зависимости от размера размер экрана
2. добавить запрос @media и изменить размер изображений при изменении размера браузера