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

旋转时网站移动视图问题

1 个答案: