Easy Modal an Endgeräte anpassen

Hi zusammen,

ich habe auf meiner Seite ein Plug In installiert. "Pulsa y te llamo gratis" auf http://powermaticspain.com/. Allerdings wird der Text innerhalb dieses formulars entweder zusammengeschoben angezeigt, oder auf dem Smartphone und Tablet mit zu viel Abstan zwischen Text und Formular.

Ich habe das nun so abgeändert, damit es im Browser gut aussieht:

HTML:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

Durch die vielen Abstände habe ich jetzt aber auf dem Smartphone und auf dem Tablet zu viel Abstand. Wie kann ich dieses Plug In bearbeiten ohne, dass sich die änderungen auch auf den anderen Endgeräten bemerkbar machen?

Kann ich das im CSS hier ändern und falls ja was muss ich anpassen?:

Das ist der CSS Code auf den ich Zufgriff habe:

HTML:

Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!

Danke Euch

Stefanie

 

Hi Maxe,

danke für deine hilfe, aber auf dem Smartphone wird es immer noch nicht gut angezeigt.

Habe das so abgeändert:

.emodal-content h4.sub-title-modal{
text-align: center; color:#333;font-family:'Philosopher' !important;font-weight:700 !important;font-size:1.6em !important;padding-top:0px !important}
.emodal-content h4.title-modal{
text-align: left; color:#333;font-family:'Philosopher' !important;font-weight:200 !important;font-size:1.4em !important;padding-top:10px !important}


h4.sub-title-modal{margin-bottom: 50px;}


@media all and ( max-width:859px ){
h4.sub-title-modal{margin-bottom: 10px;}
}

Ist das korrekt?

Wenn ich die Abstände bei dem Modal Html code rausnehme
<h4 class="title-modal" style="text-align: center;">¿Necesitas que te ayudemos en algo?</h4>
<p style="text-align: center;"> </p>
<h4 class="sub-title-modal" style="text-align: center;">¡TE LLAMAMOS GRATIS!</h4>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div class="dashed"> </div>
<div style="margin: 0 auto !important;">
</div>
<p style="text-align: center;">[contact-form-7 id="392" title="form-aside"]</p>

schiebt es mir Text und Formular zusammen.

Was kann ich machen, dass es auf dem Smartphone auch gut angezeigt wird?

 

Also ich habe jetzt das - rausgenommen kann aber jetzt die Abstände nicht mehr regulieren. Der code ist jetzt so:

<h4 class="title-modal" style="text-align: center;">¿Necesitas que te ayudemos en algo?</h4>
<p style="text-align: center;"> </p>
<h4 class="sub-title-modal" style="text-align: center;">¡TE LLAMAMOS GRATIS!</h4>
<div class="dashed"> </div>
<div style="margin: 0 auto !important;">
<p style="text-align: center;">[contact-form-7 id="392" title="form-aside"]</p>
</div>

Ich habe also keine Abstände, trotzdem werden auf dem tablet und auf dem Laptop jetzt rießen Abstände angezeigt. Auf dem Smartphone ist die Ansicht jezt gut. Es ist also genau anders herum.

.emodal-content h4.sub-title-modal{
text-align: center; color:#333;font-family:'Philosopher' !important;font-weight:700 !important;font-size:1.6em !important;padding-top:0px !important}
.emodal-content h4.title-modal{
text-align: left; color:#333;font-family:'Philosopher' !important;font-weight:200 !important;font-size:1.4em !important;padding-top:10px !important}


h4.sub-title-modal{margin-bottom: 50px;}


@media all and ( max-width:150px ){
h4.sub-title-modal{margin-bottom: 10px;}
}
}

 

Ich glaube Du merkst schon, ich habe vom Code absolut keine Ahnung... :?: Aber DAS hat mir geholfen und jetzt funktioniert alles! DANKESCHÖN, DU BIST MEIN PERSÖNLICHER HELD!