Wie divs responsive mit einem benutzerdefinierten Wordpress-Theme zu machen?

Question

Ich habe ein benutzerdefiniertes Wordpress-Theme, das ich verwende, und ich bearbeite eine meiner Seiten. Ich habe 3 Divs erstellt, die grundsätzlich in der Mitte der Seite horizontal ausgerichtet sein sollten. Ich habe herausgefunden, wie man alles richtig ausrichten kann, aber ich brauche es, um darauf zu reagieren. Wenn ich die Webseite von einem mobilen Gerät aus anschaue, erscheinen die Divs nicht einmal vollständig auf dem Bildschirm und es gibt keine Bildlaufleiste.

Bitte sehen Sie sich das Bild an, wie es aussehen soll. Die drei divs die "Antworten suchen, Ticket erstellen und Chat mit einem Agenten" anzuzeigen Links:

Hier mein Code ist es, diese divs zu erstellen:

<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>

Das Thema verwendet externe CSS, aber wenn ich den gleichen ansprechenden Effekt mit Inline-CSS bekommen könnte, wäre es großartig.

Ich würde jede Hilfe, die ich hier bekommen kann, schätzen !!

Answer 1

CSS3 media queries sind deine Freunde hier und nein, sie können nicht inline gemacht werden. Im Allgemeinen ist es am besten, sowieso keine Inline-CSS zu verwenden.

Sie können entweder eigene Medienabfragen erstellen (siehe here) oder Ihr Design in ein CSS-Framework wie Bootstrap oder Foundation konvertieren (ich persönlich bevorzuge Foundation), um sie für Sie zu erstellen.