Как обрабатывать медиа-запросы в альбомной ориентации

Question

Здравствуйте, у меня есть веб-сайт, на котором есть два заголовка, один заголовок отображается в виде моба, а другой - в представлении рабочего стола. Я использовал @media, чтобы скрывать и отображать заголовки, он работает нормально, пока я не наклоню свой мобильный , когда я наклоняю свой мобильный телефон, появляется скрытый заголовок кода, который я использовал.

 @media only screen and (max-width:767px)  {

.mobcat{
    display: none;

}

Answer 1

Вы можете просто добавить (orientation: landscape) к вашему запросу, как это

    @media only screen and (max-width:767px)  and (orientation: landscape)   
    {
    .mobcat{ 
          display: none;
           }
    }

или

 @media (max-width:767px) and (orientation: landscape) { 
        .mobcat{ 
              display: none;
               }
       }