title: How to make divs responsive using a custom wordpress theme?
body: <p>I have a custom wordpress theme that I am using, and I am editing one of my pages. I created 3 divs that basically should align horizontally in the center of the page. I figured out how to get everything aligned correctly, but I need it to be responsive. When I view the web page from a mobile device, the div's do not even appear fully on the screen and there is no scroll bar. </p>
  
  <p>Please see the image as to how it should look. The three div's display the "Find Answers, Submit a Ticket, and Chat with an Agent" links:<br>
  <a href="https://i.stack.imgur.com/224ng.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/224ng.png" alt="enter image description here"></a></p>
  
  <p>Here is my code to create these divs:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;center&gt;
  &lt;div style="width: 900px;"&gt;
  
  &lt;a href="http://neawebservices.com/client/knowledgebase.php" target="_blank"&gt;&lt;div style="float: left; width: 200px; margin-right: 20px; border-radius: 25px; border: 2px solid #007ebf; padding: 20px; height: 150px; text-align: center;"&gt;
  &lt;h3 class="priceplanhr"&gt;Find Answers&lt;/h3&gt;
  &lt;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" /&gt;
  
  &lt;/div&gt;&lt;/a&gt;
  
  &lt;a href="https://neawebservices.com/client/submitticket.php" target="_blank"&gt;&lt;div style="float: left; width: 200px; margin-right: 20px; border-radius: 25px; border: 2px solid #007ebf; padding: 20px; height: 150px; text-align: center;"&gt;
  &lt;h3 class="priceplanhr"&gt;Submit a Ticket&lt;/h3&gt;
  &lt;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" /&gt;
  
  &lt;/div&gt;&lt;/a&gt;
  
  &lt;a href="javascript:void(Tawk_API.toggle())"&gt;&lt;div style="float: left; width: 200px; margin-right: 20px; border-radius: 25px; border: 2px solid #007ebf; padding: 20px; height: 150px; text-align: center;"&gt;
  &lt;h3 class="priceplanhr"&gt;Chat with an Agent&lt;/h3&gt;
  &lt;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" /&gt;
  
  &lt;/div&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/center&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The theme uses external css but if I could get the same responsive effect using inline css, it would be great. </p>
  
  <p>I would appreciate any help that I can get on this!!</p>