html - 显示:@media 中没有全局作用

标签 html css display

我有 2 个我无法弄清楚的主要问题。

1) 我有一个隐藏的小部件区域,它应该只在最大宽度为 1338px 时显示,同时,我的右侧小部件应该消失。

问题是,当我添加 display: none; 以隐藏左侧小部件时,即使最大宽度达到 1338px,它也会保持隐藏状态。

在我的 @media 中,我将 max-width: 1338px;

设置为 display:block

2) 我遇到的下一个问题是我的左侧边栏有一个图片库,当 max-width 达到 923px

时它应该会消失

但是,当我将 display:none 添加到 @media for max-width: 923px; 时,无论宽度如何,它都不会显示屏幕是。即使我的屏幕宽度超过 923 像素,它也不会显示任何内容。

这是我正在处理的网站示例的链接。 https://codepen.io/christiangutierrezreyez/pen/aMXpQd?editors=1100

您可能会在 CSS 行中发现问题的区域 169 到 192 和 351。我注释掉了第 352 行,因为那一行给我带来了问题。

我很抱歉没有删除这些区域以使其更具可读性。但是我不知道哪些部分应该被删掉,哪些部分应该被保留。

任何帮助将不胜感激!感谢您抽出时间。

最佳答案

关于左侧面板和图库,媒体查询的结束 } 太早了,没有包含 #photos-left-sidebar-wrapper,#hidden-left-侧边栏:

https://codepen.io/anon/pen/KEJWop?editors=1100

关于html - 显示:@media 中没有全局作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55318331/

相关文章:

适用于 IE 和 firefox 的 CSS 页脚

javascript - 关于按钮外观的 jquery 提示

javascript - 我有一个 div,它需要动态复制

Javascript 隐藏/显示多个元素

java - Android Studio 上不显示的项目

javascript - 移动范围拇指时动画范围滴答

javascript - 检查哈希是否存在的最佳方法是什么?

javascript - HTML 自动附加文件上传

javascript - 将选定的单选按钮设为粗体

html - 如何使选择列表中的文本居中