Live server do not load @media from css file with link tag-CodePudding

Live server do not load @media from css file with link tag.

<head>
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link rel="stylesheet" href="https://rohh.ru/API/style/module.css" type="text/css"/>
  <link rel="stylesheet" href="https://rohh.ru/API/style/void.css" type="text/css"/>
</head>

Module API code

@media screen and (max-width:100vh) {
  .for-desktop{display: none !important;}
  .for-mobile{display: flex;}
}
@media screen and (max-height:100vw) {
  .for-mobile{display: none !important;}
  .for-desktop{display: flex;}
}

The general problem is:

I have two types of menus. One for mobile, another for desktop. It is not working on server only.

<menu >
<menu >

STATIC LOCAL DYNAMIC LOCAL

I do not know even how to Google this issue. Also, help in comments properly retitle this problem.

I was trying to make proper formatting:

type="text/css"/

Change orientation landscape to max-width 100vh ...

(orientation: landscape)
(max-width:100vh)

Load it to the proper server with WP or Apache.
Open in another browser and clear cache

CodePudding user response：

i think this article will help you to solve your problem, i hope this help you. you can change your size to pixel (px). you can learn from this too, i have try that, and working

CodePudding user response：

The issue you’re having with the media queries is using 100vh and 100vw for max-width and max-height. Try changing it to use pixels (e.g. max-width: 400px)