在屏幕尺寸上隐藏 div id

Question

您好，提前谢谢我想在移动设备上隐藏一个 div id 并创建一个最小屏幕尺寸。任何小于 997px 宽度的东西都是我想隐藏 div id 的地方。

我的 CSS

@media only screen and (min-device-width : 997px) {
    #DIV_1 { display:none; }
}
#DIV_1 {
    box-sizing: border-box;
    color: rgb(51, 51, 51);
    cursor: default;
    height: auto;
    position: relative;
    width: 222px;
    perspective-origin: 111px 279.5px;
    transform-origin: 111px 279.5px;
    border: 0px none rgb(51, 51, 51);
    font: normal normal normal normal 16px/16px Arial, Helvetica, sans-serif;
    margin: 0px 0px 30px;
    outline: rgb(51, 51, 51) none 0px;
}/*#DIV_1*/ 

这是链接 https://www.superherodigital.com/services/graphic-design/

灰色的侧边栏是 DIV_1

Answer 1

您当前正在使用min-device-width: 997px，这意味着如果屏幕尺寸大于997px，则应隐藏#div_1。您应该改用(max-width : 997px) 并且@media-query 应该放在样式表的末尾。

将此代码添加到您的样式表中：

#DIV_1 {
     display: block;
     box-sizing: border-box;
     color: rgb(51, 51, 51);
     cursor: default;
     height: auto;
     position: relative;
     width: 222px;
     perspective-origin: 111px 279.5px;
     transform-origin: 111px 279.5px;
     border: 0px none rgb(51, 51, 51);
     font: normal normal normal normal 16px/16px Arial, Helvetica, sans-serif;
     margin: 0px 0px 30px;
     outline: rgb(51, 51, 51) none 0px;

@media (max-width : 997px) {
     #DIV_1 { display:none; }
}