如何减少页眉介绍文本和介绍标题的大小？

Question

如何缩小横幅图像中间的文本大小？每当我缩小字体大小时，照片就会出现在上面，图像的位置也会发生变化。我想要改变字体大小，使文本看起来干净，在右边，而不是与人重叠，我也希望标签线看起来比标题文本更小。我也希望它在移动设备上看起来更干净。它在移动浏览器中看起来很混乱。

这就是它的样子- 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>，反而会增加两者的大小。