Benötigen Sie zwei Spalten zu stapeln, anstatt sich für Mobile

Question

zu überlappen. Ich versuche, diese zwei Spalten reagieren zu lassen, aber egal, was ich versuche, sie überlappen.

Jede Hilfe wäre willkommen!

#serviceTop{width:48%;margin:0 0 0 160px;} 
 
#minicontact{width:25%;float:right;margin:-525px 155px -5px 0;} 
 
#button4{margin:0 0 0 122px;height:55px;width:145px;border-radius:20px;background-color:#6db9fa;color:#ffffff;font-size:14px;} 
 
#miniformtitle{margin:76px 0 -38px 90px;}

<div id="serviceTop"> 
 
<h2>We put time back in your week.</h2> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus lacus, vestibulum a augue quis, dignissim venenatis arcu. Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie fermentum sit amet suscipit tortor.</p> 
 
<p>Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie fermentum sit amet suscipit tortor.</p> 
 
<h3>Here to simplify your day!</h3> 
 
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus lacus, vestibulum a augue quis, dignissim venenatis arcu. Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie fermentum sit amet suscipit tortor.</p> 
 
<p>Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie fermentum sit amet suscipit tortor.</p> 
 
</div> 
 
<p>&nbsp;</p> 
 
<div id="minicontact"> 
 
<h3 id="miniformtitle">Get Started</h3> 
 
<form class="contact" action="&lt;?=$_SERVER['REQUEST_URI'];?&gt;#cform1" method="post" name="simp_cont"> 
 
<p><br /> <input id="captcha" class="input" style="position: absolute; left: -9999px;" name="captcha" type="text" /><br /> <input id="name" name="fname" type="text" placeholder="NAME" /><br /> <input id="phone" name="phone" type="text" placeholder="PHONE NUMBER" /><br /> <input id="email" name="email" type="text" placeholder="EMAIL ADDRESS" /><br /> <input id="footage" name="footage" type="text" placeholder="ESTIMATED SQUARE FOOTAGE" /><br /> <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea></p> 
 
</form></div>

Answer 1

eine Medienabfrage hinzufügen, die nicht nur die Breite auf 100% setzt, sondern setzt auch die Margen:

(Hinweis: Stellen Sie die max-width in den Medien Abfrage an Ihre Bedürfnisse

)

#serviceTop { 
 
    width: 48%; 
 
    margin: 0 0 0 160px; 
 
} 
 

 
#minicontact { 
 
    width: 25%; 
 
    float: right; 
 
    margin: -525px 155px -5px 0; 
 
} 
 

 
#button4 { 
 
    margin: 0 0 0 122px; 
 
    height: 55px; 
 
    width: 145px; 
 
    border-radius: 20px; 
 
    background-color: #6db9fa; 
 
    color: #ffffff; 
 
    font-size: 14px; 
 
} 
 

 
#miniformtitle { 
 
    margin: 76px 0 -38px 90px; 
 
} 
 

 
@media screen and (max-width: 700px) { 
 
    #serviceTop, 
 
    #minicontact { 
 
    width: 100%; 
 
    margin: 0; 
 
    } 
 
    #miniformtitle { 
 
    margin: 0; 
 
    } 
 
}

<div id="serviceTop"> 
 
    <h2>We put time back in your week.</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus lacus, vestibulum a augue quis, dignissim venenatis arcu. Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie 
 
    fermentum sit amet suscipit tortor.</p> 
 
    <p>Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie fermentum sit amet suscipit tortor.</p> 
 
    <h3>Here to simplify your day!</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus lacus, vestibulum a augue quis, dignissim venenatis arcu. Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie 
 
    fermentum sit amet suscipit tortor.</p> 
 
    <p>Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie fermentum sit amet suscipit tortor.</p> 
 
</div> 
 
<p>&nbsp;</p> 
 
<div id="minicontact"> 
 
    <h3 id="miniformtitle">Get Started</h3> 
 
    <form class="contact" action="&lt;?=$_SERVER['REQUEST_URI'];?&gt;#cform1" method="post" name="simp_cont"> 
 
    <p><br /> <input id="captcha" class="input" style="position: absolute; left: -9999px;" name="captcha" type="text" /><br /> <input id="name" name="fname" type="text" placeholder="NAME" /><br /> <input id="phone" name="phone" type="text" placeholder="PHONE NUMBER" 
 
     /><br /> <input id="email" name="email" type="text" placeholder="EMAIL ADDRESS" /><br /> <input id="footage" name="footage" type="text" placeholder="ESTIMATED SQUARE FOOTAGE" /><br /> <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea></p> 
 
    </form> 
 
</div>

Answer 2

einen Wrapper verwendet, und es als Flexbox definiert. Ich habe einen Teil der Ränder entfernt, die veraltet sind (denke ich).

.wrapper { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    align-items: center; 
 
} 
 

 
#serviceTop { 
 
    width: 48%; 
 
    margin: 0 0 0 10px; 
 
} 
 

 
#minicontact { 
 
    width: 25%; 
 
    margin: 0; 
 
} 
 

 
#button4 { 
 
    margin: 0 0 0 122px; 
 
    height: 55px; 
 
    width: 145px; 
 
    border-radius: 20px; 
 
    background-color: #6db9fa; 
 
    color: #ffffff; 
 
    font-size: 14px; 
 
} 
 

 
#miniformtitle { 
 
    margin: 0; 
 
}

<div class="wrapper"> 
 
    <div id="serviceTop"> 
 
    <h2>We put time back in your week.</h2> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus lacus, vestibulum a augue quis, dignissim venenatis arcu. Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie 
 
     fermentum sit amet suscipit tortor.</p> 
 
    <p>Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie fermentum sit amet suscipit tortor.</p> 
 
    <h3>Here to simplify your day!</h3> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam purus lacus, vestibulum a augue quis, dignissim venenatis arcu. Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie 
 
     fermentum sit amet suscipit tortor.</p> 
 
    <p>Donec faucibus pulvinar viverra. Curabitur semper ex ex, ut fermentum risus tempus sit amet. Nunc in diam id nibh molestie fermentum sit amet suscipit tortor.</p> 
 
    </div> 
 
    <div id="minicontact"> 
 
    <h3 id="miniformtitle">Get Started</h3> 
 
    <form class="contact" action="&lt;?=$_SERVER['REQUEST_URI'];?&gt;#cform1" method="post" name="simp_cont"> 
 
     <p><br /> <input id="captcha" class="input" style="position: absolute; left: -9999px;" name="captcha" type="text" /><br /> <input id="name" name="fname" type="text" placeholder="NAME" /><br /> <input id="phone" name="phone" type="text" placeholder="PHONE NUMBER" 
 
     /><br /> <input id="email" name="email" type="text" placeholder="EMAIL ADDRESS" /><br /> <input id="footage" name="footage" type="text" placeholder="ESTIMATED SQUARE FOOTAGE" /><br /> <textarea class="textarea" name="message" placeholder="COMMENTS"></textarea></p> 
 
    </form> 
 
    </div> 
 
</div>