Yeniden boyutlandırılırken metnin görüntüye göre aynı konumda nasıl kalması gerekir?

Question

Görüntü yeniden boyutlandırıldığında metni nasıl yaparım, metin yeniden boyutlandırıldığında görüntüye göre aynı konumda kalır. Altbilgi metni sütunlar arasında aynı boşlukları içermelidir. ben şimdi ne var Burada

: Görüntü daha küçük gittiğinde metin aynı yerde kalmaz

full size

Resized

, nasıl aynı metnin yerinde kalmasını yapabilirim ?

HTML

<div id="header"> 
    <div class="container-fluid"> 

     <div class="row"> 
      <div class="col-md-6 logo"> 
       <!-- LOGO --> 
       <a href="/" class="navbar-brand navbar-left"> 
        <div class="logo"><img src="img/logo.png" alt="LOGO"></div> 
       </a> 
      </div> 
      <div class="col-md-6" id="text"> 
       <h1>DELIVERING SPRING 2017</h1> 
      </div> 
     </div> 

     <!-- VIDEO--> 

     <div class="container" id="container"> 
      <div class="row"> 
       <div align="center" class="embed-responsive embed-responsive-16by9"> 
        <video autoplay loop class="embed-responsive-item"> 
         <source src="CannonStreet_Timelapse_1280.mp4" type="video/mp4"> 
        </video> 
       </div> 
      </div> 
     </div> 

     <!-- FOOTER--> 

     <section id="footer"> 
      <div class="container-fluid"> 
       <div class="row"> 
        <div class="col-md-2 left-col"> 
         <p><a class="contacts" href="#">CONTACTS</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>STUART LAWSON</h2> 
         <p>20 7409 8920</p> 
         <p>07870 555 930</p> 
         <p><a class="email" href="#">slawson@savills.com</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>JOSH LAMB</h2> 
         <p>020 7409 8891</p> 
         <p>07976 988 486</p> 
         <p><a class="email" href="#">jlamb@savills.com</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>SAM BOREHAM</h2> 
         <p>020 7710 7963</p> 
         <p>07917 635 465</p> 
         <p><a class="email" href="#">samb@gmreal.com</a></p> 
        </div> 
        <div class="col-md-2 contact-person"> 
         <h2>DAN ROBERTS</h2> 
         <p>020 7710 7963</p> 
         <p>07801 143 909</p> 
         <p><a class="email" href="#">danr@gmreal.com</a></p> 
        </div> 
        <div class="col-md-2 right-col"> 
         <h2><a class="info" href="#">info@theriverbuilding.com</a></h2> 
        </div> 
       </div> 
      </div> 
     </section> <!-- END END FOOTER --> 
    </div> 
</div> 

CSS

body { 
    background: url("../img/background.jpg")no-repeat ; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 


/***HEADER**/ 

.logo img { 
    margin: 40px 45px; 
} 

h1 { 
    font-family: 'GothamMedium', sans-serif; 
    position: absolute; 
    right: 45px; 
    top: 150px; 
    font-size: 1.55em; /*19pt in psd*/ 
    color: #ffffff; 
} 

/***VIDEO***/ 

#container { 
    padding-top: 200px; 
} 


/*** FOOTER ***/ 

.col-md-2 { 

} 

#footer { 
    padding: 100px 45px 0; 
} 

.left-col { 
    padding: 110px; 
    margin-left: -75px; 
} 

.right-col { 
    padding: 86px; 
    position: absolute; 
    right: 76px; 
} 

#footer p { 
    font-family: 'GothamBook', sans-serif; 
    color: #ffffff; 
    font-size: 1.063em; /*13pt in psd*/ 
} 

#footer .email { 
    font-family: 'GothamBook', sans-serif; 
    color: #ffffff; 
    font-size: 1.063em; /*13pt in psd*/ 
} 

#footer .contacts { 
    font-size: 1.063em; /*13pt in psd*/ 
    font-family: 'GothamBook', sans-serif; 
    color: #ffffff; 
} 

#footer h2 { 
    font-family: 'GothamBook', sans-serif; 
    font-size: 1.063em; /*13pt in psd*/ 
    color: #ffffff; 
} 

#footer a:hover { 
    color: #0e6655; 
    outline: none; 
} 

#footer .info { 
    font-family: 'GothamMedium', sans-serif; 
    color: #ffffff; 
    font-size: 1.5em; /*15pt in psd*/ 
} 

/***MEDIA QUERIES***/ 

@media(max-width: 400px){ 
    #header .logo img{ 
     margin: 15px 0 20px; 
     height: 100px; 
    } 
    #header h1{ 
    font-size: 15px; 
    text-align: center; 
    margin-left: 0; 
    margin-right: 0; 
    } 
    .left-col { 
     padding: 0 0 0 0; 
    } 

    .right-col { 
     padding: 0 ; 
     font-size: 12px; 
    } 
} 

@media(max-width: 768px){ 
    #header .logo img{ 
     margin: 15px 0 20px; 
     height: 120px; 
    } 
    h1{ 
     font-family: 'GothamMedium', sans-serif; 
     position: absolute; 
     right: 45px; 
     top: 165px; 
     font-size: 1.55em; /*19pt in psd*/ 
     color: #ffffff; 
    } 
    #footer{ 
     text-align: center; 
    } 
    .info{ 
     padding-top: 50px; 
    } 
    .left-col { 
     text-align: center; 
     margin-left: 0; 
     margin-right: 0; 
     padding-top: 0; 
    } 
    .right-col { 
     padding: 86px; 
     position: absolute; 
     right: 45px; 
    } 
} 

@media(max-width: 1400px){ 
    .logo img { 
     margin: 40px 45px; 
    } 
    h1 { 
     font-family: 'GothamMedium', sans-serif; 
     right: 45px; 
     top: 150px; 
     font-size: 1.55em; /*19pt in psd*/ 
     color: #ffffff; 
     text-align: center; 
    } 
    #footer .info { 
     font-family: 'GothamMedium', sans-serif; 
     color: #ffffff; 
     font-size: 1.5em; /*15pt in psd*/ 
     margin-left: -50px; 

    } 
    #footer .contacts { 
     font-size: 1.063em; /*13pt in psd*/ 
     font-family: 'GothamBook', sans-serif; 
     color: #ffffff; 
    } 
    #footer p { 
     font-family: 'GothamBook', sans-serif; 
     color: #ffffff; 
     font-size: 1.063em; /*13pt in psd*/ 
    } 
    #footer .email { 
     font-family: 'GothamBook', sans-serif; 
     color: #ffffff; 
     font-size: 1.063em; /*13pt in psd*/ 
    } 
    .right-col { 
     padding: 86px; 
     position: absolute; 
     right: 45px; 
    } 
} 

Answer 1

Sınıf "satır" ve "md-col-6" kurarsınız yalan:

Bu

benim kodudur:

.row { 
width: 100%; 
display: block; 
position: relative; 
} 

.row .md-col-6 { 
position: absolute; 
top: 50px; 
right: 100px; 
} 

Tüm bu faktörler ulaşmak istediğiniz yere göre.

Answer 2

yor CSS sonunda bu koymak için deneyin:

#footer * { 
     margin-left: 2%; 
    }