Hello, I have a question regarding a specific issue in my code. I am trying to use a media query to make a tag disappear when the width of the window is less than 1200px, but it's not working as expected. I believe it might be related to inheritance. Can you please advise me on how to solve this problem?
This pertains to the NaviSearch.jsx file where I want to hide the top tag
import React from "react";
import "../navi.css";
import pencil from "./images/pencil.png";
import { Link } from "react-router-dom";
function NaviRecent (props) {
return (
<Link to="/login" style={{textDecoration : 'none'}}>
<button id="NaviRecent">
<img src={pencil} id="NaviRecentImage"/>
<span id="NaviRecentText">최근강의</span>
</button>
</Link>
);
}
export default NaviRecent;
The following snippet is from the CSS file, focusing only on relevant parts:
#Navi {
position: sticky;
background-color: #fff;
width: 100%;
height: 64px;
top: -1px;
z-index: 5;
box-shadow: 0 2px 4px 0 hsl(0deg 0% 81% / 50%);
width: 1263.330;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
}
#NaviRecent {
border: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
right: 20px;
width: 100px;
height: 30px;
padding: 8px;
background: #00c471;
color: #fff;
border-radius: 4px;
}
#NaviHiddenLogo {
display: none;
}
#NaviRecentText {
box-sizing: border-box;
color: white;
cursor: pointer;
font-family: Pretendard,-apple-system,BlinkMacSystemFont,system-ui,Roboto,Helvetica Neue,Segoe UI,Apple SD Gothic Neo,Noto Sans KR,Malgun Gothic,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,sans-serif;
font-size: 16px;
font-weight: 600;
margin-left: 4px;
}
#NaviRecentImage {
width: 15px;
height: 15px;
}
@media screen and (max-width: 1020px) {
#NaviRecent {
display: none;
}
}