2016-04-19 45 views
0

我有一个自定义WordPress主题,我正在使用,并且正在编辑我的一个页面。我创建了3个div,基本上应该在页面中心水平对齐。我想出了如何正确对齐所有内容,但我需要它的响应。当我从移动设备上查看网页时,div甚至不会完全显示在屏幕上,也没有滚动条。如何使用自定义WordPress主题来让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>

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

我将不胜感激任何帮助,我可以得到这个!

回答

2

CSS3 media queries是你的朋友在这里,不,他们不能内联。无论如何,通常最好避免使用内联CSS。

您可以构建自己的媒体查询(请参阅here)或将您的主题转换为CSS框架,例如BootstrapFoundation(我个人更喜欢Foundation)为您完成。