如何在小屏幕上隐藏元素前后？

Question

我在这里有一个网站：
http://neocsatblog.mblx.hu/
页面类别有一个前后元素（这个包装箱前后都是一个很好的线类别） 不幸的是，如果我在分类中添加一个很长的名称，则文本不能居中，因为行。
如图所示：

正如您所看到的"Bloggal kapcsolatos hírek"文字看起来不太好，但是如果我在前后移动时有足够的空间可以向前移动并使其看起来更好:) 我的媒体查询是：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px)
and (-webkit-min-device-pixel-ratio: 2) {
    .title--striped {
        font-size: 8px;
    }

    .title--striped__inwrap:before,.title--striped__inwrap:after {
        display: none !important;
    }
}

我错了什么？

Answer 1

尝试重写媒体查询（假设您正在寻找特定的屏幕宽度）：

@media only screen and (min-width: 320px) and (max-width: 480px) { 
    .title--striped {
        font-size: 8px;
    }

    .title--striped__inwrap:before,.title--striped__inwrap:after {
        display: none !important;
    }
} 

如果没有这个技巧，我会假设你的CSS选择器是不正确的。如果我理解您正确询问的内容，则需要在小屏幕上隐藏帖子类别。查看代码，可能更容易：

@media only screen and (min-width: 320px) and (max-width: 480px) { 
    .title--striped {
        font-size: 8px;
    }

    div.post__category.title--striped {
        display: none !important;
    }
} 

如果我误解了您的问题并且我可以编辑我的答案，请告诉我