Как разместить div, закрепленный в нижней части страницы, в мобильном представлении?

#css #dreamweaver

Вопрос:

Я работаю над веб-сайтом, и я новичок. У меня есть div с идентификатором div #dvid, который я сделал в качестве кнопки. Я хочу, чтобы он находился в нижней части страницы при просмотре на мобильном устройстве, однако, как бы я ни пытался установить его положение снизу на 0, он остается только сверху.

вот веб-сайт, над которым я работаю: https://tryslimleaf.com/d24/indexwritten.php#a2c

Я хочу, чтобы это оставалось в нижней части страницы исправленным.

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

Редактировать:Текст внутри кнопки «Готов к заказу» находится в правом верхнем углу, если смотреть на мобильном телефоне.

Извините за мой плохой английский, это не мой основной язык. Любой совет будет очень признателен.

Комментарии:

1. Из-за этого ваша кнопка становится оранжевой #dvid:hover { background-color: #FF8B19; }

Ответ №1:

Если вы проверите css, там есть

введите описание изображения здесь

это top: 1% главная причина, по которой ваша кнопка всегда остается сверху. Поэтому вам нужно включить top: auto свой медиа-запрос. Вот пример с вашего сайта:

введите описание изображения здесь

Тогда результат будет:

введите описание изображения здесь

Надеюсь, вам это поможет решить вашу проблему. Если вы хотите, чтобы эта кнопка всегда была внизу, просто удалите ее, top: 1% а затем добавьте bottom: 1% или что вы хотите.

Комментарии:

1. Спасибо за вашу помощь. Я попытался удалить top: 1%, а также попытался сделать его top: auto. кнопка не находится внизу для мобильных устройств, но теперь кнопка больше не отображается на рабочем столе.

Ответ №2:

На этом веб-сайте у вас есть top: 1% настройки для этой кнопки. Просто измените это на bottom: 1%

Комментарии:

1. если он хочет, чтобы он был на высоте, когда он не на мобильном телефоне, то его лучше установить top:unset в медиа-запросе.

2. эй, спасибо за ваше предложение. К сожалению, если я удалю или изменю значение top: 1% либо на top: auto, top: unset, либо полностью удалю его, кнопка больше не будет отображаться на рабочем столе. он будет отображаться только на мобильном телефоне внизу.