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

Question

[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>

Comments

[Dmitry]

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

[Ankhena]

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

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

[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]

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

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

[enema110]

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

[Ankhena]

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

в спойлере

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

[enema110]

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

[Ankhena]

enema110, ну так в справочнике посмотрели бы как media писать, со скобками беда.

@media (условие) {
  селектор {правила}
  селектор {правила}
}

Answer 1

[Алексей]

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

Comments

[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]

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