Question

现在，当我使我的codepen的窗口变窄时，带引号的块会响应，同时覆盖两个按钮。

我希望它上升所以它不会接近按钮。

以下是codepen：http://codepen.io/RycerzPegaza/pen/NGpEGp?editors=010

这里是CSS：

@import url(https://fonts.googleapis.com/css?family=Lato:700|Amatic+SC:700&subset=latin,latin-ext);

body{
  background: url('http://i147.photobucket.com/albums/r293/VIEWLINER/REED/RFGF02.jpg~original') no-repeat center center fixed;
  background-size: cover;

}


.row-fluid {
  position: relative;
  top: 200px;
}


p {
  font-family: 'Amatic SC';
  color: #DDDDDD;
  font-size: 250%;
  padding: 10px;
}

#qouteblock {

  position: relative;
  margin-bottom: ;
}

#background{
  position: relative;
  top: 170px;
  background-color:rgba(0,0,0,0.6);
}


.container {
  padding: 10px;
}

nav {
  position: fixed;
  bottom: 5%;
  left: 46%;
  font-family: 'Lato';
  font-size: 18px !important;
}

iframe {
  position: fixed;
  bottom: 2%;
  left: 46%;
}

Answer 1

使用媒体查询来减少.content的字体大小：

@media (max-width: 650px) {
 p {
  font-size: 30px
 }
}

当窗口越来越窄时，Div块响应地上升

1 个答案: