如何縮小標題介紹文字和介紹標題的大小

Question

如何縮小標題圖像中間的文字大小？每當我減小字體大小時，照片就會在上面，圖像的位置也會改變。我想改變字體大小，使文本看起來乾淨，在右側，不與人重疊，我也希望標題看起來比標題文本小。 我也希望它在移動設備上看起來更乾淨。它在手機瀏覽器

看着凌亂這是怎麼looks- http://imgur.com/a/8u7Cv

HTML代碼

<header> 
     <div class="container"> 
      <div class="intro-text"> 
       <div class="intro-lead-in">Welcome To AssignmentHelpStreet</div> 
       <div class="intro-heading">The path you won't turn your back on</div> 
       <a href="#about" class="page-scroll btn btn-xl">About Us</a> 
      </div> 
     </div> 
    </header> 

CSS代碼

header{ 
    background-image:url(../img/bg.jpg); 
    background-repeat:no-repeat; 
    background-attachment:fixed; 
    background-position:center center; 
    -webkit-background-size:cover; 
    -moz-background-size:cover; 
    background-size:cover; 
    -o-background-size:cover; 
    text-align:right; 
    color:black; 
} 
header .intro-text{ 
    padding-top:100px;padding-bottom:50px 
} 
header .intro-text .intro-lead-in{ 
    font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic;font-size:22px;line-height:22px;margin-bottom:25px 
} 
header .intro-text .intro-heading{ 
    font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;font-size:50px;line-height:50px;margin-bottom:25px 
} 
@media (min-width:768px){ 
    header .intro-text{ 
     padding-top:300px;padding-bottom:200px 
    } 
    header .intro-text .intro-lead-in{ 
     font-family:"Droid Serif","Helvetica Neue",Helvetica,Arial,sans-serif;font-style:italic;font-size:40px;line-height:40px;margin-bottom:25px 
    } 
    header .intro-text .intro-heading{ 
     font-family:Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight:700;font-size:75px;line-height:75px;margin-bottom:50px 
    } 
} 

Answer 1

，而不是增加字體尺寸更好將圖像和文本放入標題標籤<h2></h2>，它會增加大小