浮动左侧导致图像消失（在移动屏幕上）

Question

我正在使用这个名为hypermarket的wordpress主题。

我添加了这堆代码：

#hypermarket-new-arrivals-products > h3:after {
    content: 'Pick a treat';
    text-align: center;
    white-space: pre;
    clear: both;
    width: 100%;
    float: left;
    font-size: 15px;
    margin: 0px auto 40px;
}

桌面上的一切都很好。但是，当我调整屏幕宽度并调整大小时，第一张产品图片就会消失。

似乎float: left;导致问题。

以下是用于说明我的意思的屏幕截图：

在桌面上

略微调整大小时：

在移动设备屏幕上

我也试过这个（没用）：

@media screen and (max-width: 767px){
#hypermarket-content {
    padding-left:7%;
    padding-right:7%;
}
#hypermarket-new-arrivals-products > h3:after {
    content: 'Pick a treat';
    text-align: center;
    white-space: pre;
    clear: both;
    width: 100%;
    float: left;
    font-size: 15px;
    margin: 0px auto 40px;
}
}