Why is svg LogoMonniMobile not visible when the width is 736px?-CodePudding

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 computer version of the SVG, and when <= 736px I show the mobile version, but for some reason <LogoMonniMobile /> does not appear on the screen. What is the reason and how can this be fixed?

CodePudding user response：

You cant use logical operators like <.

@media screen and (min-width: 737px) {
  #LogoMonni-mobile {
    display: none;
  }
}

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

CodePudding user response：

As i understand the id problem LogoMonni_0 LogoMonni_1 LogoMonni_2 ... if id sv1 are the same as scg2 I don’t know for some reason the browser thinks they should disappear