这个故事区在移动设备上显示的时候，会隐藏故事区上的描述还有按钮 ... 大标题的字号会小一点，上下还会有两条线 ...

现在我们去完成这块设计 ..

打开故事区的这个样式文件 ... 先添加一个媒体查询 .. @media only screen and max-width 767px

先添加一个 .content ... 里面嵌套一些样式 ... 先把 description 隐藏起来 .. 用一个 display:none ...

再把按钮也隐藏起来 ... .action .. display: none

然后设置一下 .header 的样式 .. font-size 设置成 24px .. 再用一个伪元素 .. .header::after

在这个 after 伪元素的上面，我们可以去添加那个标题上的横线 ..

display 设置成 block，把这个伪元素设置成块级元素 .. content ，元素里的内容是个空白

width 设置成 90 像素 ... 再用一个 border-bottom 添加一条下边儿的边框 .. 1px solid #000 ..

然后用一个 padding-bottom ，添加 8 个像素的下边儿的内边距 ..

再设置一下居中的样式 .. 我们可以让 header 变成一个 flexbox .. display: flex

flex-direction 设置成 column ... align-items 设置成居中 ..

再把文字的对齐方式设置成居中对齐 .. text-align: center ...

然后去预览一下 ...

现在我们这个故事区的设计就做好了 ...