你需要使用媒体查询删除.about .about-content .right上的width: 50%;。它呈现成这样的原因是它使用了移动的上的50%可用空间，而这并不多。
可能看起来像这样：

@media only screen and (max-width: 800px) {
    .about .about-content .right {
        width: 100%;
    }
}

给你...
增加以下内容：

@media only screen and (max-width: 768px) {
    .about .about-content .right {
        width: 100% !important;
    }
}

嘿，在你的codepen中，你犯了一个错误。最大宽度需要从较宽的屏幕到较小的屏幕，而不是相反的方式，因为，页面中较低的值总是会覆盖较高的值，你的媒体查询将永远不会得到满足。
把最大宽度的媒体查询放在css的最后，或者至少放在你想在小屏幕上有不同风格的元素之后，然后从最大的数字开始（max-width=“1800 px”），到最小的数字结束（max-width=“500 px”）。
因此：

//default (bigger than 993px)
    .class {
        font-size: 10px;
    }
    //992px and smaller
    @media screen and (max-width:992px){
        .class {
            font-size: 20px;
        }
    }
    //767px and smaller
    @media screen and (max-width:767px){
            .class {
                font-size: 24px;
            }
    }
    //600px and smaller
    @media screen and (max-width:600px){
            .class {
                font-size: 32px;
            }
    }

就像Cervus和Kameron指出的那样

.about .about-content .right {width: 100%}

是主要的修复方法，那么下一个问题就是max-width类的左右填充，因为

box-sizing: border-box

它将呈现100%，然后删除两边80 px的空间。如果在小设备上查看，它将删除大部分可用空间，例如在320 px宽屏幕上，一半的可用空间将被删除。

.max-width {padding: 0 80px}

也许更好的是

.max-width {padding: 0 20px}

然后在一个更大的媒体查询，它可以更新到80 px时，它适合。