Как адаптировать верстку под мобильные устройства?

Question

enema110 @enema110

Как адаптировать верстку под мобильные устройства?

Доброго времени суток.
Подскажите пожалуйста как адаптировать окошки с промокодами под мобильные устройства? Вот сайт что бы было понятней opromokod.ru
Добавлял

<meta name="viewport" content="width=device-width, initial-scale=1">

Но не помогло, либо прописывал совсем не там.

А вот часть самого кода:

<div id="DIV_1">
	<div id="DIV_2">
		<div id="DIV_3">
			<div id="DIV_4">
				 5%
			</div>
		</div>
		<div id="DIV_5">
			 <span id="SPAN_7">Скидка 5% за подписку на рассылку VK</span>
			<p id="P_8">
			</p>
Условия: подпишись на рассылку от ВелоДрайв в VK и получи купон на скидку 5%. Действует в розничных магазинах!
			<p id="P_9">
				<div class="wp-block-button"><a class="wp-block-button__link has-background" href="https://ad.admitad.com/g/djq5zn6hpf5195ba99f05f3bd41df7/?i=3" style="background-color:#52ff1e"><strong>Участвовать</strong></a></div>
			</p>
			<p id="P_12">
				<i id="I_13"></i>Срок действия: Бессрочно
			</p>
			<div id="DIV_14">
			</div>
		</div>
	</div>

Вопрос задан более трёх лет назад
100 просмотров

8 комментариев

Подписаться 1 Простой 8 комментариев

Dmitry @dmitry-l

<div id="DIV_1">
  <div id="DIV_2">
    <div id="DIV_3">
      <div id="DIV_4">

Написано более трёх лет назад

Ankhena @Ankhena Куратор тега CSS

С meta viewport - правильно.
Дальше пишите в нужных @media нужные правила.

И не используйте id для стилизации и такую кучу div'ов.

Написано более трёх лет назад

enema110 @enema110 Автор вопроса

Ankhena,

<style>
@media (max-width: 600px) {
  #sidebar {display: none;}
}
#DIV_1 {
    bottom: 0px;
    box-shadow: rgba(1, 0, 66, 0.47) 0px 10px 20px -5px;
    box-sizing: border-box;
    clear: both;
    color: rgb(51, 51, 51);
    float: left;
и тд

Писал в блоке стили, но эффекта 0

Написано более трёх лет назад

Ankhena @Ankhena Куратор тега CSS

enema110, вашего кода нет на сайте. А телепатии не хватает догадаться куда именно и как вы его вставляли на сайт.

Флоаты перестали использовать для верстки блоков уже несколько лет, почитайте про флексы.

Написано более трёх лет назад
enema110 @enema110 Автор вопроса

Ankhena, через "просмотреть код" все видно, и стили так же видны. Вставлял в вордпресе через html блок

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS

enema110,
вот ваши стили, которые применяются к #sidebar
в спойлере

И всё, что написано в media - работает и sidebar переместился вниз, как его и попросили.
Про display:none там нет ни слова.

Написано более трёх лет назад
enema110 @enema110 Автор вопроса

Что то его не видно в коде, прописывал по разному, это последний вариант. Туплю уже с этой проблемой

Написано более трёх лет назад
Ankhena @Ankhena Куратор тега CSS
enema110, ну так в справочнике посмотрели бы как media писать, со скобками беда.
@media (условие) { селектор {правила} селектор {правила} }
Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1

2 комментария

enema110 @enema110 Автор вопроса

<style>
@media (max-width: 600px) {
  #sidebar {display: none;}
}
#DIV_1 {
    bottom: 0px;
    box-shadow: rgba(1, 0, 66, 0.47) 0px 10px 20px -5px;
    box-sizing: border-box;
    clear: both;
    color: rgb(51, 51, 51);
    float: left;
    height: 187.813px;
    left: 0px;
    min-height: 30px;
    position: relative;
    right: 0px;
    text-align: left;
    text-decoration: none solid rgb(51, 51, 51);
    text-size-adjust: 100%;
    top: 0px;
    width: 699.891px;
    max-width: 600px
    column-rule-color: rgb(51, 51, 51);
    perspective-origin: 349.938px 93.9063px;
    transform-origin: 349.938px 93.9063px;
    caret-color: rgb(51, 51, 51);
    background: rgba(0, 0, 0, 0) linear-gradient(rgb(255, 255, 255) 0%, rgb(255, 255, 255) 79%, rgb(235, 238, 245) 89%, rgb(235, 249, 255) 100%) repeat scroll 0% 0% / auto padding-box border-box;
    border-top: 1px solid rgb(221, 221, 221);
    border-right: 1px solid rgb(221, 221, 221);
    border-bottom: 0px none rgb(51, 51, 51);
    border-left: 1px solid rgb(221, 221, 221);
    border-radius: 4px 4px 4px 4px;
    font: normal normal 400 normal 14px / 20px PTSansRegular, Helvetica, sans-serif;
    margin: 0px 0px 25px;
    outline: rgb(51, 51, 51) none 0px;
    overflow: hidden;
    padding: 10px 10px 30px;
}/*#DIV_1*/

Написано более трёх лет назад

enema110 @enema110 Автор вопроса

Что только не пробовал прописывать

Написано более трёх лет назад

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

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

CSS

Простой
Как убрать отступ?
- 1 подписчик
- 2 часа назад
- 51 просмотр
1

ответ
HTML

+1 ещё

Простой
Как кодировать кириллицу в поле data?
- 1 подписчик
- 4 часа назад
- 37 просмотров
1

ответ
Вёрстка

Средний
Как правильно вставлять изображения при наличии двух тем оформления сайта?
- 1 подписчик
- 9 часов назад
- 88 просмотров
1

ответ
HTML

+1 ещё

Простой
Как в теге select один символ сделать другого цвета?
- 1 подписчик
- 11 часов назад
- 81 просмотр
1

ответ
CSS

Простой
Как уместить кроссбраузерную поддержку в одну строку?
- 1 подписчик
- 11 часов назад
- 98 просмотров
1

ответ
HTML

+1 ещё

Простой
Как поставить элементы в одну строку и выровнять их?
- 1 подписчик
- вчера
- 78 просмотров
1

ответ
CSS

+1 ещё

Простой
Как стилизовать пагинацию постов по определённому признаку?
- 1 подписчик
- вчера
- 74 просмотра
1

ответ
HTML

+2 ещё

Простой
Как подкрасить 2 блока в разные цвета по всей ширине в дочернем Blade-шаблоне?
- 1 подписчик
- вчера
- 57 просмотров
2

ответа
HTML

+2 ещё

Средний
Неправильное отображение верстки во всех браузерах локально на компьютере, в чем может быть проблема?
- 1 подписчик
- вчера
- 78 просмотров
1

ответ
CSS

Простой
Как сделать так, чтобы при наведении на один объект, меняется другой, с помощью hover?
- 1 подписчик
- вчера
- 65 просмотров
1

ответ
Показать ещё Загружается…

Frontend-разработчик (React)

ДАЛЕЕ

от 130 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

Расработка Парсер для сайта https://soliq.uz/activities/debtor

19 апр. 2024, в 19:51

3000 руб./за проект

Два скрипта, Python, web3.py, вызов функции смарт-конракта

19 апр. 2024, в 19:47

50000 руб./за проект

Сделать дизайн главной страницы сайта

19 апр. 2024, в 19:17

1500 руб./за проект

<div id="DIV_1"> <div id="DIV_2"> <div id="DIV_3"> <div id="DIV_4">
С meta viewport - правильно.
Дальше пишите в нужных @media нужные правила.

И не используйте id для стилизации и такую кучу div'ов.
Ankhena,
<style> @media (max-width: 600px) { #sidebar {display: none;} } #DIV_1 { bottom: 0px; box-shadow: rgba(1, 0, 66, 0.47) 0px 10px 20px -5px; box-sizing: border-box; clear: both; color: rgb(51, 51, 51); float: left; и тд

Писал в блоке стили, но эффекта 0
enema110, вашего кода нет на сайте. А телепатии не хватает догадаться куда именно и как вы его вставляли на сайт.

Флоаты перестали использовать для верстки блоков уже несколько лет, почитайте про флексы.
Ankhena, через "просмотреть код" все видно, и стили так же видны. Вставлял в вордпресе через html блок
enema110,
вот ваши стили, которые применяются к #sidebar
в спойлере

И всё, что написано в media - работает и sidebar переместился вниз, как его и попросили.
Про display:none там нет ни слова.
Что то его не видно в коде, прописывал по разному, это последний вариант. Туплю уже с этой проблемой
enema110, ну так в справочнике посмотрели бы как media писать, со скобками беда.
@media (условие) { селектор {правила} селектор {правила} }

Answer 1 · 2019-09-20 13:26:38

Для этого в CSS существуют медиазапросы. Научитесь их использовать и сможете решить свою проблему. И javascript тут не причем.

Как адаптировать верстку под мобильные устройства?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт