Почему svg LogoMonniMobile не отображается при ширине 736 пикселей?

Question

[Herberito Galustyan]

Это мой код: codesandbox.io

CSS

@media (width > 736px) {
  #LogoMonni-mobile {
    display: none;
  }
}

@media (max-width <= 736px) {
  #LogoMonni-pc {
    display: none;
  }
  #LogoMonni-mobile {
    display: block;
  }
}

JSX

import { ReactComponent as LogoMonniPC } from "./logoMonniPC.svg";
import { ReactComponent as LogoMonniMobile } from "./LogoMonniMobile.svg";

import "./styles.css";

export default function App() {
  return (
    <div className={"LogoMonni"}>
      <LogoMonniPC />
      <LogoMonniMobile />
    </div>
  );
}

Когда размер экрана равен, > 736pxя показываю компьютерную версию SVG, а когда <= 736pxпоказываю мобильную версию, но по какой-то причине не отображается на экране. В чем причина и как это исправить?

Answer 1

[smilingcheater]

Потому что вы используете некорректный синтаксис медиазапросов.
Вместо media (width > 736px) надо писать media (min-width: 737px)
Вам это даже редактор в codesandbox'е это как ошибку подчёркивает.
Попробуйте почитать документацию https://developer.mozilla.org/ru/docs/Web/CSS/Medi...

Answer 2

[Алексей Дубровин]

Загуглить как правильно делать media ?