Как сделать div отзывчивым с помощью пользовательской темы WordPress?

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

Пожалуйста, посмотрите на изображение, как это должно выглядеть. В трех элементах div отображаются ссылки «Найти ответы, отправить заявку и пообщаться с агентом»:
введите здесь описание изображения

Вот мой код для создания этих div:

<center>
<div style="width: 900px;">

<a href="http://neawebservices.com/client/knowledgebase.php" target="_blank"><div style="float: left; width: 200px; margin-right: 20px; border-radius: 25px; border: 2px solid #007ebf; padding: 20px; height: 150px; text-align: center;">
<h3 class="priceplanhr">Find Answers</h3>
<img class="alignnone wp-image-980 size-full" src="http://neawebservices.com/wp-content/uploads/2016/04/64-X-64.png" alt="" width="66" height="44" />

</div></a>

<a href="https://neawebservices.com/client/submitticket.php" target="_blank"><div style="float: left; width: 200px; margin-right: 20px; border-radius: 25px; border: 2px solid #007ebf; padding: 20px; height: 150px; text-align: center;">
<h3 class="priceplanhr">Submit a Ticket</h3>
<img class="alignnone wp-image-980 size-full" src="http://neawebservices.com/wp-content/uploads/2016/04/128-X-128-3.png" alt="" width="66" height="44" />

</div></a>

<a href="javascript:void(Tawk_API.toggle())"><div style="float: left; width: 200px; margin-right: 20px; border-radius: 25px; border: 2px solid #007ebf; padding: 20px; height: 150px; text-align: center;">
<h3 class="priceplanhr">Chat with an Agent</h3>
<img class="alignnone wp-image-980 size-full" src="http://neawebservices.com/wp-content/uploads/2016/04/64-X-64-1.png" alt="" width="55" height="55" />

</div></a>
</div>
</center>

Тема использует внешний css, но если бы я мог получить такой же адаптивный эффект, используя встроенный css, было бы здорово.

Я был бы признателен за любую помощь, которую я могу получить по этому поводу!


person Jeremy Collins    schedule 19.04.2016    source источник


Ответы (1)


медиа-запросы CSS3 вам в помощь, и нет, их нельзя сделать встроенными. В любом случае лучше не использовать встроенный CSS.

Вы можете создать свои собственные медиа-запросы (см. здесь) или преобразовать свою тему в CSS. такие как Bootstrap или Foundation (я лично предпочитаю Foundation), чтобы сделать это за вас.

person RoyaleWCheese1    schedule 19.04.2016