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

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 ******** --> 

下一节的内容在那里的情况下，问题是在这里我的CSS人混在一起

<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 ******** --> 

是我包括在内。

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查询的移动或设备响应类似如下： 你自己调整。

@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; 
    } 
}