CSS媒体查询冲突

Question

我遇到了@media print {}查询的问题。 我试图让我的投资组合看起来很好。链接为http://izzatnadiri.com/

当我尝试打印页面时，内容会向右移动。原因是遵循代码

@media (min-width:768px) {
#wrapper { padding-left: 400px; }
#sidebar-wrapper { width: 400px; } }

以下是该CSS文件的链接//izzanadiri.com/css/simple-sidebar.css

打印时，print.css应覆盖此代码。代码在

之下

@media print{
#sidebar-wrapper {width: 0px;}
#wrapper {padding-left: 0px !important; -webkit-transition: none !important; }}

以下是print.css //izzatnadiri.com/css/print.css

的链接

但是，当我尝试打印页面时，打印查询不会覆盖最小宽度查询。

帮助将不胜感激。

提前致谢。

Answer 1

您是否尝试在首次查看媒体时设置“屏幕”？我的意思是这样的：

@media screen (min-width:768px) {
#wrapper { padding-left: 400px; }
#sidebar-wrapper { width: 400px; } }