文本重叠容器并在垂直移动视图中位于第二页

Question

所以在 "about" 页面上，我将所有内容都放在一个容器中。现在在大屏幕上，当我点击 "click to slide panel right" 区域时，一段文字向右滑动。当我调整到小于 720px 时，面板消失并且文本块也应该消失，但是它显示在右侧的较小屏幕中并与其他页面重叠。

a) 我如何包含这个文本块 b) 我想我知道如何弄清楚之后如何将文本移动到图像下方，所以当在移动设备上查看时，图片位于屏幕中心（我已经实现了）。然后文本块出现在容器区域中的图像下方，没有添加任何动画（只是显示为静态）。几个小时以来一直在努力解决这个问题，但我觉得这是我的定位？我在我的代码中做错了什么？谢谢！

freecodecamp personal portfolio project

.secondpage{
  background-color:pink;
  height:57em;
}

/*.title{
  padding-top:.5em;
}*/

.picture{        
  padding-top:10em;
  padding-bottom:0em;
}

.img-circle{
  width:20em;
  height:20em;
  border:.2em solid;
  border-radius:50%;
}


/*start of toggle panel design*/
/***********************************************************************************************************************/
@media screen and (max-width: 720px) {
  .img-circle{
  margin-left:auto;
  margin-right:auto;
    margin-top:-8em;  
  }
 
 
  }


#flip{
position:absolute;
  transform:rotate(-90deg);
  margin-left:6em;
  margin-top:-6.1em;
  border:.1em solid;
}

.title{
  margin-left:22em; 
  margin-top:-24em;
  
}


.contthird1{
  background-color:red;
  height:100%;
}
.title p{
 border:.1em solid;
    color: rgba(0,0,0,0.9);
  width:100%;
}
@media screen and (max-width: 720px){
  .title>p{
    border-style:none;
  }
}

.title a:hover{ 
  text-decoration:none;
  color:blue;
  font-weight:bold;
}/*for self taught link*/

Answer 1

修复只需添加

@media screen and (max-width: 720px) {
  .title {
    margin: 0;
  }
}

http://codepen.io/anon/pen/VawmZr

因为在宽版中，标题不是浮动对齐，而是负边距右上对齐：

.title{
  margin-left:22em; 
  margin-top:-24em;

}

当这个负边距消失后，它会回到它作为块元素应该在的位置。

文本重叠容器并在垂直移动视图中位于第二页

Text overlapping container and onto 2nd page in vertical mobile view

css

containers

css-position