Not getting desired behaviour in media query

I am currently working on my portfolio website and I am using React.

It's almost done in laptop view and I am making it responsive for tablet and mobile view.

So the problem is that I set a media query where when my screen goes below 500px, my about-info container's flex-direction change to a column so that elements inside my about-info container are set one below one but when I change the screen It doesn't happen anything.

About.jsx-

     import React from "react";
    import Button from '@mui/material/Button';
    import "./About.css";

    function About() {
        return (
            <div>
                <div id="about-me">
                    <div className="about-heading">
                        <h1> About Me</h1>
                    </div>

                    <div className="about-info">
                        <div className="about-text">
                            <p>I'm a Computer science student at  Centurion University of Technology and Management.
                                I have a passion for <b>Full stack development</b> and <b>UI/UX design</b> with knowledge of data structures and algorithms.
                                I am graduating in 2024, and I am actively seeking a <b>Job</b> opportunity as a Full-stack developer
                                to apply my skills and contribute to a dynamic and innovative team.. </p>

                            <p>I have a strong understanding of the full stack development lifecycle and also proficient in
                                UI/UX design principles and can use <b>Figma</b> to create wireframes and prototypes.</p>

                            <p>I am a highly motivated and results-oriented individual. I am always eager to learn new things and take on
                                new challenges. I am also a <b>Team</b> player and I am able to work effectively with others to achieve common goals. </p>

                            <a href="#contact" ><Button variant="contained" className="contact-button">Contact Me</Button></a>
                        </div>

                        <div className="about-skills">
                            <div>
                                <h2>Skills</h2>
                            </div>
                            <p>HTML</p> <p>CSS</p> <p>JAVASCRIPT</p> <p>REACT</p> <p>NODE JS</p> <p>EXPRESS JS</p>
                            <p>MONGO DB</p> <p>MY SQL</p> <p>GIT</p> <p>GIT HUB</p>
                            <p>BOOTSTRAP</p> <p>MATERIAL UI</p> <p>FIGMA</p> <p>REST API</p>

                        </div>

                    </div>


                </div>
            </div>
        )
    }

    export default About;

About.css--

     @import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;800&family=Poppins:wght@300;400;500;600;800&display=swap");


@media (max-width:500px){
  .about-info{
    flex-direction: column;
  }
}

#about-me {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 3vh 1vw;
  gap: 1vh;
  background-color: #ffffff;
  padding-top: 70px;
  padding-bottom: 7%;
}

.about-heading {
  display: flex;
  justify-content: center;
  margin: 3vh 3vw;
  position: relative;
}

.about-heading::after {
  content: "";
  height: 0.8vh;
  width: 3vw;
  position: absolute;
  background: rgb(16, 238, 60);
  background: linear-gradient(
    90deg,
    rgba(16, 238, 60, 1) 0%,
    rgba(20, 81, 231, 1) 0%
  );
  bottom: -1vh;
  border-radius: 5px;
}

.about-heading h1 {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  justify-items: center;
}

.about-info {
  display: flex;
  /* justify-content: space-between; */
  gap: 1vw;
}

.about-text {
  font-family: "Poppins", sans-serif;
  max-width: 55%; /* Limit the width of the text */
  margin: 2vh 2vw;
}

.about-text Button {
  transition: transform 0.3s ease;
}

.about-text Button:hover {
  transform: translateY(-5px);
}

.about-text p {
  padding: 1vh 2vw;
  color: #666666;
}

.about-info .contact-button {
  margin-left: 2vw;
}
.about-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.about-skills {
  width: 38%;
  margin: 1vh 1vw;
  text-align: center;
}
.about-skills p {
  padding: 8px 18px;
  display: inline-block;
  background-color: #d7d7d7;
  color: #666666;
  margin: 0.8vw;
  font-size: 1rem;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  border-radius: 6%;
}

.about-skills h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}
b {
  font-weight: bolder;
}

But on my website, nothing is changed--

You can see in the code there are two child divs inside the .about-info class i.e. .about-text and .about-skills, but there are not going from one below to another after giving media query property.

Solution

I got the answer why it didn't behave like that because I forgot to add this

meta tag-

<meta name="viewport" content="width=device-width, initial-scale=1.0">

inside the head tag. Now it's working perfectly.

And thank you to those who suggest me some tips.