Wie kann ich dieses div auf 100% des Bildschirms auf Handy/Tablet erweitern?

Question

FÜR CLARITY EDITED

Zur Zeit habe ich 2 divs, die Seite auf DESKTOP "kt_mobile_left" einander sind und "kt_mobile_right" - jedes div 47% der Seite breit ist.

Ich will es so, dass auf mobilen UND Tablet, das linke Div ("kt_mobile_left") erstreckt sich auf 100% der Seite und schiebt "kt_mobile_right" darunter. Momentan bleibt es bei nur 47% der Seite. Ich habe eine Medienabfrage eingestellt, um die Breite auf 100% zu setzen, aber sie scheint sie nicht zum div hinzuzufügen.

Ist meine Medienabfrage korrekt?

Hier ist mein Code.

<style type="text/css"> 

/*desktop css */ 

    .kt_mobile_left { 
     width: 47%; display: inline-block; vertical-align: text-top; margin-right:25px; padding: 10px; 

    } 

    .kt_mobile_right { 

     width: 47%; display: inline-block;vertical-align: text-top; max-width: 457px; 

    } 




    /* #### Tablets or mobile css */ 
    @media screen and (max-device-width: 867px){ 

    .kt_mobile_left { 
     width: 100% !important; 
     min-width: 800px; 
     display: block !important; 
     margin-right: 0px; 

    } 

    .kt_mobile_right { 
     width: 100% !important; 
     float: none !important; 
     display: block !important; 
    } 



    } 

</style> 


<div style="margin: 0 auto; text-align: center; margin-top: 25px; padding: 25px; width: 100%"> 
    <div class="kt_mobile_left"> 
    <p style="font-size: 40px; line-height: 45px; margin: 0 0 40px; position: relative; text-align: center; font-weight: 300; color: #000; text-align: left">Learn more about who may be calling or texting your teen</p> 
    <p style="font-size: 15px; line-height: 150%; text-align: left">  TeenSafe has partnered with BeenVerified, a one-stop bakground check service, to help you learn more about the people who are calling or texting your child. Try it for just $1 for 5 days. </p> 
</div> 

<div class="kt_mobile_right"> 
<img src="http://storage.googleapis.com/instapage-user-media/ce3c4430/5232032-0-BeenVerified.png"> 
</div> 
</div> 

Hier ist meine JSfiddle: https://jsfiddle.net/kn4xrue5/

Kann jemand helfen?

Answer 1

Sie haben gerade den Code durcheinander gebracht. Ich habe etwas von Ihrem Code gelöscht und es scheint, dass Medienabfragen gut funktionieren.

.kt_mobile_left { 
      background: red; 
      width: 47%; display: inline-block; vertical-align: text-top; margin-right:25px; padding: 10px; 

     } 
     .kt_mobile_right { 
      background: green; 

      width: 47%; display: inline-block;vertical-align: text-top; max-width: 457px; 

     } 
     @media screen and (min-width: 320px) and (max-width: 1024px) { 
      .kt_mobile_left { 
       width: 100%; 
      } 
      .kt_mobile_right { 
       width: 100%; 
      } 
     } 

Schauen Sie sich die Geige

https://jsfiddle.net/mgautam1408/xjdcqvu3/ 

Answer 2

Ich verstehe immer noch nicht, was Sie versuchen zu tun, aber ein paar Dinge zuerst und hoffe, das hilft. Auf KT-Handy-rechts haben Sie eine maximale Breite. Sie müssen das in Ihrer Medienabfrage löschen, indem Sie max-width tun: auto sonst nichts wird nicht 100% gehen. Um nur die beiden Behälter zu überlappen, können Sie einfach Position hinzufügen: absolut; zu den Klassen in der Medienabfrage.

Ein anderer Vorschlag würde sein, nur den zu verstecken, der am unteren Rand sein wird, indem er display: none zu dieser Klasse in der Medienabfrage hinzugefügt hat.

Answer 3

My solution verwendet bootstrap.

<div class="col-xs-12"> 
    <div class="row"> 
    <div class="col-xs-12 col-sm-6"> 
     <h1 style="font-size: 40px; line-height: 45px; margin: 0 0 40px; position: relative; text-align: center; font-weight: 300; color: #000; text-align: left">Learn more about who may be calling or texting your teen</h1> 
     <p style="font-size: 15px; line-height: 150%; text-align: left"> TeenSafe has partnered with BeenVerified, a one-stop bakground check service, to help you learn more about the people who are calling or texting your child. Try it for just $1 for 5 days. </p> 
    </div> 

    <div class="col-xs-12 col-sm-6"> 
     <img src="http://storage.googleapis.com/instapage-user-media/ce3c4430/5232032-0-BeenVerified.png"> 
    </div> 
    </div> 
</div> 

Bootstrap Verwendung hat seine Vor- und Nachteile, aber es ist ein sehr beliebter Rahmen. Diese Lösung verwendet keines der von Ihnen bereitgestellten CSS, da es die Bootstrap-Klassen verwendet. Ich habe das CSS, das Sie inline gelassen haben, herausgezogen, da es im Allgemeinen keine Best Practice ist.

Wenn Sie Fragen haben oder den Code ändern wollen, lassen Sie es mich wissen.