回転時のウェブサイトのモバイルビューの問題

Question

基本的には、携帯電話を回転させたときに私のウェブサイトのホームページのボタンが次のセクションと混同しますが、ウェブサイトは正常です。モバイルビューのサイズでサイトをテストすると、エディタの表示がうまくいくように見えるが、まだ回転が混ざり合っているというのは奇妙なことだ。問題はここに私の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 ******** --> 

とごちゃ混ぜ

ホームページのコンテンツ

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

次のセクションの内容私が含まれているものです。

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

問題を修正して任意のヘルプは、あなたは下記のようなモバイルデバイスや応答のための@media Queryを使用

Answer 1

を大幅に高く評価されています あなたが自分自身を調整します。

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