title: how to handle text div in different screen resolutions according to parent div
body: <p>Hi i am designing a website..
  Here is the url 
  <a href="https://ifixandrepair.com/ifar/ifixandrepairwellington/" rel="nofollow">https://ifixandrepair.com/ifar/ifixandrepairwellington/</a></p>
  
  <p>I have designed it on 1366*768, 15 inch screen as u can see here on screenfly 
  <a href="http://quirktools.com/screenfly/#u=https%3A//ifixandrepair.com/ifar/ifixandrepairwellington/&amp;w=1366&amp;h=768&amp;a=1&amp;s=1" rel="nofollow">http://quirktools.com/screenfly/#u=https%3A//ifixandrepair.com/ifar/ifixandrepairwellington/&amp;w=1366&amp;h=768&amp;a=1&amp;s=1</a></p>
  
  <p>Its giving me perfect result the way i want. But on changing screen size for desktops 13-24 inch i am unable to handle the text div class .span6 as my banner image changes its size without cropping and squeezing i want this class content (text buttons text box) to exactly change size and position(the same place where they are placed in 15 inch screen) accordingly. 
  I don't want to put all media queries for each respective screen. I know position absolute is the real reason but on removing it i cant manage the design. Any suggestions i can manage it properly.</p>
  
  <p>CSS:</p>
  
  <pre><code>.parenthead, .testimonial_header {
  background-color: #000000;
  padding: 35px;
  height: 550px;
  }
  .masthead .span6 {
  position: absolute;
  top: 40px;
  text-align: justify;
  left: 615px;
  float: left;
  }
  .masthead {
  color: #fff;
  margin-bottom: 40px;
  font-size: 18px;
  line-height: 30px;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.1), 0 1px 10px rgba(0, 0, 0, 0.1);
  height: 300px;
  position: relative;
  top: 0px;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  }
  .masthead p {
  color: white !important;
  font-size: 15px;
  width: 90%;
  line-height: 30px;
  }
  .subscribe {
  position: relative;
  top: 140px;
  width: 80%;
  float: left;
  left: -15px;
  }
  .masthead img {
  width: 100%
  }
  #mobile
  {
  display:none; 
  }
  @media (max-width: 767px) and (min-width: 200px)
  {
  #mobile
  {
  display:block; 
  }
  #web
  {
  display:none; 
  }
  
  }
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="parenthead"&gt;
  &lt;div class="masthead"&gt;
  &lt;img src="https://ifixandrepair.com/ifar/wp-content/uploads/2016/01/banner_web_1140x476.jpg" id="web"&gt;
  &lt;img id="mobile" src="https://ifixandrepair.com/ifar/wp-content/uploads/2016/01/banner_1_PNG.png"/&gt;
  &lt;div class="container"&gt;
      &lt;div class="row"&gt;
       &lt;div class="span6"&gt;
       &lt;h1&gt;Connect with us!&lt;/h1&gt;
       &lt;p&gt;iFixandRepair helps get your mobile device back up and running again, servicing screen replacement, speaker repair, &amp; more on phones, tablets, &amp; computers.&lt;/p&gt;
       &lt;div class="social_button"&gt;
       &lt;a href="https://www.facebook.com/pages/IFix-And-Repair/242100755854336" class="btn btn-primary btn-large" target="_blank" onclick="track_event('External Link', 'Facebook Home')"&gt;
       &lt;i class="icon-facebook"&gt;&lt;/i&gt; Facebook
       &lt;/a&gt;
       &lt;a href="http://www.twitter.com/iFixandRepairW" class="btn btn-info btn-large" target="_blank" onclick="track_event('External Link', 'Twitter Home')"&gt;
       &lt;i class="icon-twitter"&gt;&lt;/i&gt; Twitter
       &lt;/a&gt;
      &lt;a href="tel:+5619078349" class="btn btn-call btn-large"&gt;
      &lt;i class="icon-phone"&gt;&lt;/i&gt; Call Us&lt;/a&gt;
      &lt;/a&gt;
      &lt;/div&gt;
     &lt;div class="subscribe"&gt;
     &lt;?php echo do_shortcode( ' [sies_subc_form]' ); ?&gt;
     &lt;/div&gt;
     &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p></p>