конфликт медиа-запросов CSS

Question

У меня проблема с запросом @media print {}. Я стараюсь, чтобы мое портфолио выглядело хорошо на принтере. Ссылка: http://izzatnadiri.com/

Когда я пытаюсь распечатать страницу, содержимое сдвигается вправо. Причина этого является следующим кодом

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

Вот ссылка на этот файл CSS //izzatnadiri.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; } }