#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, либо полностью удалю его, кнопка больше не будет отображаться на рабочем столе. он будет отображаться только на мобильном телефоне внизу.