カスタムWordPressテーマを使用してDivsを反応させるには？

Question

私は私が使用しているカスタムワードプレスのテーマを持っており、自分のページの1つを編集しています。私は基本的にページの中央に水平に整列する必要がある3つのdivを作成しました。私はすべてを正しく整列させる方法を考え出しましたが、私はそれが敏感である必要があります。モバイルデバイスからWebページを見ると、divは画面に完全に表示されず、スクロールバーも表示されません。

どのように見えるかについては、画像を参照してください。 3の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を使用して同じ反応効果を得ることができれば、それは素晴らしいことです。

私はこれに得ることができる任意のヘルプに感謝します！

Answer 1

CSS3 media queriesはここにあなたの友人であり、インラインではできません。とにかくインラインCSSを使用しないようにするのが一般的です。

独自のメディアクエリ（hereを参照）を作成するか、テーマをBootstrapまたはFoundation（私は個人的にはFoundationが好き）のようなCSSフレームワークに変換して、それらを行うことができます。