如何使用自定义wordpress主题使div响应?

时间:2016-04-19 02:21:29

标签: html css wordpress responsive

我正在使用自定义wordpress主题,我正在编辑其中一个页面。我创建了3个div,基本上应该在页面的中心水平对齐。我想出了如何正确对齐所有内容,但我需要它才能做出响应。当我从移动设备查看网页时,div甚至不会完全出现在屏幕上,也没有滚动条。

请查看图片的外观。三个div显示"查找答案,提交故障单,与代理聊天"链接:
enter image description here

以下是我创建这些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>
&#13;
&#13;
&#13;

主题使用外部css,但如果我可以使用内联css获得相同的响应效果,那就太棒了。

我很感激我能得到的任何帮助!!

1 个答案:

答案 0 :(得分:2)

CSS3 media queries是你的朋友,不,他们无法在线完成。无论如何,最好不要使用内联CSS。

您可以构建自己的媒体查询(请参阅here)或将您的主题转换为CSS框架,例如BootstrapFoundation(我个人更喜欢基金会)来执行你。