Question

我一直在设计一个致敬作为freecodecamp项目的一部分。

我的笔记本电脑上的布局在https://codepen.io/9788cl/pen/WExxEK

在下面添加了片段。（只是运行了片段，并且该格式化也是关闭的。

我正试图在顶部，图像＆amp;引用/生物并排下方，图像下方的字体真棒图标。

当我在手机上查看页面时，横向布局是正确的，但是当移动到肖像时，引用＆amp;文字在图像下移动，＆amp;他们下面的社交媒体图标看起来相当混乱。我能做些什么吗？

＆＃13;

body{ margin:20px;}

.main-title2
{
  font-family: 'Orbitron', sans-serif;
  font-size:72px;
  border-color:#000000;
  border-width:4px;
  border-style:solid;
  border-radius:10px;
  margin-bottom:30px;
  text-shadow: 1px 1px 3px #000000;
  padding-bottom:15px;
  }

.paragraph-font
{
 font-family: 'Electrolize', sans-serif;

  font-size: 18px;
}

.img-rounded 
{
   border-width:4px;
   border-radius:10px;  
   width:500px;
   height:400px;
}

#bio
{
  width:600px;
  border-width:2px;
 border-radius:10px;
  margin-left:50px;
  
  }

#quote
{
  font-family: 'Dancing Script', cursive;
  font-size:24px;
  border-width:2px;
 border-radius:10px;
  margin-top:25px;
  }
h3
{
  font-family: 'Dancing Script', cursive;
  font-size:24px;
  border-width:2px;
 border-radius:10px;
  margin-bottom:10px;
  
}

#twitter
{
  
  padding-right:140px;
  padding-left:140px;
}
.fa-instagram
{
  color:#000000
}
.fa-twitter
{
  color:#000000
}
.fa-facebook
{
  color:#000000
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

               <head>
                 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
                 <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">
                 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" />
                 <link href="https://fonts.googleapis.com/css?family=Revalia" rel="stylesheet">
                 
                 <link href="https://fonts.googleapis.com/css?family=Electrolize" rel="stylesheet">
                 <link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
                 
                 <link href="https://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet">

</head>


<div class="container-fluid">
  
  <h1 class="main-title2 text-center">Elon Musk Tribute Page</h1>

  <div class="row">
    <div class="col-xs-5">
      <img class="img-responsive img-rounded" src="https://i.ytimg.com/vi/VdjsurFddLQ/maxresdefault.jpg" alt="elon-musk" </img>
    </div>
    <div id="bio">
    <div class="col-xs-7">
      <blockquote id ="quote" class="text-center">
        " I think that's the single best piece of advice: constantly think about how you could be doing things better and questioning yourself. "</blockquote>
      <h3 class="text-center" ><strong>-Elon Musk</strong></h3>
      <p class="text-center paragraph-font">Born in South Africa in 1971, Elon Musk became a multimillionaire in his late 20s when he sold his start-up company, Zip2, to a division of Compaq Computers. He achieved more success by founding X.com in 1999, SpaceX in 2002 and Tesla Motors in 2003. Musk made headlines in May 2012, when SpaceX launched a rocket that would send the first commercial vehicle to the International Space Station. He bolstered his portfolio with the purchase of SolarCity in 2016, and cemented his standing as a leader of industry by taking on an advisory role in the early days of President Donald Trump's administration</p>
      </div> <!--col-xs-7 -->
        
   </div> <!--id="bio" -->
  </div> <!-- row-->
  
  
<div id="social-media">
  <a href="https://www.instagram.com/elonmusk/?hl=en"><i id="instagram"class="fa fa-instagram fa-5x"></i></a>
  <a href="https://twitter.com/elonmusk"> <i id="twitter"class="fa fa-twitter fa-5x"></i></a>
  <a href="https://www.facebook.com/Elon-Musk-19958149870/"><i id="facebook"class="fa fa-facebook fa-5x"></i></a>
  </div>
  
   
  
</div>

＆＃13;

Answer 1

了解使用媒体查询进行响应式设计：https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

是否可以将我的页面格式保持为纵向模式（移动）

1 个答案: