旋转时的网站移动视图问题

Question

基本上，当手机旋转时，我网站主页中的按钮会与下一部分混淆，但是在桌面上该网站很好。虽然我觉得奇怪的一件事是，在编辑器中以移动视图大小测试网站时看起来不错，但一个旋转仍然会混淆。

首页内容

 <div class="container">
                     <div class="row">
                             <div class="col-md-12">
                                     <div id="header-content">
                                            <h1>Malik Elgabroun</h1>

                                     </div>
                             </div>
                    </div>

                    <div class="row">
                             <div class="col-sm-6 center-block">    
                                     <div id="find-out">
                                            <p><a href="#body-about">FIND OUT MORE</a></p>
                                     </div>
                             </div>   



                             <div class="col-sm-6 center-block">    
                                     <div id="view-resume">
                                            <p><a href="Malik's%20Resume.pdf" target="_blank">VIEW MY RESUME</a></p>
                                     </div>
                             </div>   
                    </div>   
     </div> <!--continaer -->
</div>  
                                <!-- ******** homepage ends here ******** -->

下一节内容与它混淆的地方

  <div id="body-about">
                     <div class="container">
                            <div class="row">

                                         <div class="col-xs-5 col-sm-4 center-block">
                                         <div class="about">
                                                <h2>ABOUT</h2>

                                         </div>
                                         </div>

                                         <div class="col-xs-7 col-sm-7 center-block">
                                         <div class="about-intro">
                                                    <p>I am interested in programming and technology-related and everyday I strive to improve myself hoping that one day I can impact others using technology. <br /> <br />
                                                    I am a multi-disciplined Graduate in International Business Management and Information Technology and currently undertaking a software engineering course. <br /><br />
                                                    The portfolio will be updated as I go along.
                                                    </p>
                                        </div>
                                        </div>

                                    <div class="col-md-1">
                                    </div>
                         </div> <!-- row -->
                    </div> <!-- container -->
        </div> <!-- body-about -->
                                        <!-- ******** about ends here ******** -->

如果问题出在我的 css 上，这里就是我所包含的。

html, body {
    margin: 0px;
    width: 100%;
    height: 100%;
    font-family: "Times New Roman", Times, serif;
}


#home {
    width: 100%;
    height: 100%;
    background: url(images/header4.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-attachment : fixed; 
}

#header-content h1 {
    font-size:4em;
    font-style:italic;
    text-align:center;
    margin-top:130px;
    color:#fff;
    font-family: Georgia, "Times New Roman", Times, serif;
    }
#header-content h3 {
    font-size:2em;
    text-align:center;
    color:#fff;
    font-family: Georgia, "Times New Roman", Times, serif;
    line-height: 1.4;
    }

#find-out {
    background-color:#EE4B28;
    width:250px;
    height:50px;
    border-radius:20px;
    margin-left:auto;
    margin-right:auto;
    margin-top:50px;
    }

#find-out:hover {
    background-color: transparent;
    border: 2px solid #EE4B28;
    transition: ease-in-out;
}
#find-out p {
    color:white;
    font-size:1.2em;
    text-align:center;
    margin-left:10px;
    padding-top:15px;
    }
#find-out a, a:hover, a:visited {
    text-decoration:none;
    color:white;
}
#view-resume{
    background-color:#EE4B28;
    width:250px;
    height:50px;
    border-radius:20px;
    margin-left:auto;
    margin-right:auto;
    margin-top: 50px;
    }
#view-resume:hover {
    background-color: transparent;
    border: 2px solid #EE4B28;
    transition: ease-in-out;
}
#view-resume p {
    color:white;
    font-size:1.2em;
    text-align:center;
    margin-left:10px;
    padding-top:15px;
    }
#view-resume a, a:hover, a:visited {
    text-decoration:none;
    color:white;
}
#body-about {
    background-color:#F05F40;

    }
.about h2{
    color: #FACDBD;
    font-size:1.5em;
    font-weight:bold;
    padding-left:30px;
    padding-top:30px;
    }
.about {
    padding-bottom:30px;
    }
.about-intro p {
    color: #FACDBD;
    font-size:1.2em;
    font-weight:bold;
    padding-top:45px;
    text-align:justify;
}

非常感谢任何解决问题的帮助

Answer 1

您将@media Query 用于移动或设备响应，如下所示： 你自己调整。

@media (min-width: 1025px) and (max-width: 1200px) {
  #header-content h1 {
    font-size: 4em;
    font-style: italic;
    text-align: center;
    margin-top: 130px;
    color: #fff;
    font-family: Georgia, "Times New Roman", Times, serif;
  }
  #header-content h3 {
    font-size: 2em;
    text-align: center;
    color: #fff;
    font-family: Georgia, "Times New Roman", Times, serif;
    line-height: 1.4;
  }
}