css - 文字重叠的容器并进入垂直移动 View 中的第二页

因此，在“关于”页面上，我将所有内容都放在了一个容器中。现在在大屏幕上，当我单击“单击以向右滑动面板”区域时，一块文本将向右滑动。当我将尺寸调整为小于720像素时，面板消失，文本块也应该消失，但是它显示在右侧的小屏幕中，并且与其他页面重叠。

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

最佳答案

解决方法只是添加

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

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

这是因为在宽版中，标题不是通过浮动对齐到右上角，而是以负边距对齐：

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

}

当负边距消失时，它将作为块元素返回到应有的位置。

关于css - 文字重叠的容器并进入垂直移动 View 中的第二页，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/35665447/