Why is LogoMonniMobile svg not rendered at 736px wide?

Question

css

This is my code: 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>
  );
}

When the screen size is > 736px I show the desktop version of the SVG, and when <= 736px I show the mobile version but for some reason it doesn't show up on the screen. What is the reason and how to fix it?

Answer 1

Because you are using incorrect media query syntax.
Instead of media (width > 736px) you need to write media (min-width: 737px)
Even the editor in codesandbox emphasizes this as an error for you.
Try reading the documentation https://developer.mozilla.org/ru/docs/Web/CSS/Medi...

Answer 2

Google how to do media correctly?