My React @media(min-width:992px){ .NewBlogCard{width:50%;} statement has no effect in browser-CodePudding

I am trying to learn React through a Udemy video and got stuck at the media queries. When I add the given @media(min-width:992px){ .NewBlogCard{width:50%;} statement into my editor and save it, nothing changes in my browser. All three cards still take up the whole screen instead of half of the screen. Does anyone know what I am doing wrong? Please see code to all my files below. The above statement is in the file called BlogCard.module.css.

BlogCard.module.css
.NewBlogCard{
    margin: 16px;
    padding: 16px;
    box-sizing: border-box;
    border-radius: 5px;
    box-shadow: 0 2px 5px #CCC;
    background-color: lightblue;
  };

  @media(min-width:992px 1px){
    .NewBlogCard{
        width:50%;
    }
  }


BlogCard.js
import React from "react";
import { dumplogs } from "./Utils";
import classes from "./BlogCard.module.css";
const BlogCard = (properties) => {
  dumplogs(properties);
  return (
    <div className={classes.NewBlogCard}>
      <h3>{properties.title}</h3>
      <p>{properties.description} </p>
    </div>
  );
};

export default BlogCard;

App.js
//import "./App.css";
import BlogCard from "./BlogCard";
import { isArrayEmpty } from "./Utils";
import classes from "./BlogCard.module.css";
function App() {
  const blogArr = [
    {
      id: 1,
      title: "Blog Title 1",
      description:
        "Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor",
    },
    {
      id: 2,
      title: "Blog Title 2",
      description:
        "Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor",
    },
    {
      id: 3,
      title: "Blog Title 3",
      description:
        "Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor Lorem Ipsum Dolor",
    },
  ];

  const blogCards = isArrayEmpty(blogArr)
    ? []
    : blogArr.map((item, pos) => {
        console.log(item);

        return (
          <BlogCard
            key={pos}
            title={item.title}
            description={item.description}
            id={item.id}
          />
          //<div className="BlogCard" key={item.id}>
          //<h3>{item.title}</h3>
          // <p>{item.description} </p>
          // </div>
        );
      });

  return <div className="App">{blogCards}</div>;
}

export default App;


Utils.js
const isArrayEmpty = (arr) => {
  if (arr !== undefined && arr !== null && arr.length > 0) {
    return false;
  }
  return true;
};

const dumplogs = (message) => {
  console.log(message);

  //sends it to a tool for tracking
};

export { isArrayEmpty, dumplogs };

CodePudding user response：

In your given code you have declared as

  @media(min-width:992px 1px){
    .NewBlogCard{
        width:50%;
    }

But in your question, you mentioned you need

@media(min-width:992px)

Please have a look at that and try to remove the 1px in the media query

CodePudding user response：

If you need all the cards to be in 50% in all screens, then you have to add

.NewBlogCard{
    width:50%;
}

without any media query. If you need the cards to be in 50% above some screensize only then, you have to use media queries. Please go through this link to learn more about media querry

For example:

    @media screen and (max-width: 768px){
     .NewBlogCard{
        width:50%;
    }
}

If you are using chrome browser and changes are not affecting better to do a hard reload and clear chache.