Как мне сделать div отзывчивым с помощью встроенного css

Question

У меня есть ситуация, когда я могу использовать только встроенный CSS, потому что в противном случае наша тема Wordpress испортится. Я создаю этот маленький div, который должен быть элементом преобразования в наших статьях. Теперь мне нужно, чтобы он был адаптивным для мобильных устройств.

приветствуется вся помощь:)

Вот мой код:

<div style="width: 560px; height: 171px; padding: 32px 32px 0px 32px; box-shadow: 0 0.063rem 0.188rem rgba(0,0,0,0.2), 0 0.125rem 0.125rem rgba(0,0,0,0.12), 0 0 0.125rem rgba(0,0,0,0.14);">
    <div>
        <h2 style="font-family: 'Circular TT', Helvetica, sans-serif; font-weight: 700px; margin: 0px; color: #003264;">Ist Ihnen das Preis-Leistungsverhältnis für Ihren Zahnschutz wichtig?</h2>
    </div>
    <div style="margin-top: 32px; display: block; text-align: center;">
        <button onclick="window.location.href = ;" type="submit" style="display: inline-block; color: #32ff96; background-color: #003264; border: 0.125rem solid #003264; font-family: Circular TT, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none; position: relative; width: calc(50% - 15px); padding: .625rem 1.37rem;">Ja</button>
        <button onclick="window.location.href = ;" type="submit" style="display: inline-block; color: #32ff96; background-color: #003264; border: 0.125rem solid #003264; font-family: Circular TT, Arial, Helvetica, sans-serif; font-weight: 700; font-size: 1rem; cursor: pointer; text-decoration: none; position: relative; width: calc(50% - 15px); padding: .625rem 1.37rem; margin-left: 20px;">Nein</button>
    </div>
</div>

Answer 1

Чтобы ваш div реагировал:

• Используйте значение ширины c, например % или vh, которое автоматически подстраивается под размер экрана.
• Использование * Значение 1008 * со свойством height позволяет автоматически подстраиваться под содержимое div, поскольку содержимое будет длиннее на узком экране.
• Вы также можете установить max-width для ограничения ширины div на большом экран.

<div style="width: 95%; max-width: 560px; height: auto; min-height: 171px;">

Не стесняйтесь обращаться ко мне за дополнительной помощью, если это необходимо.