CSS Media queries not working as required-CodePudding

I have two divs that are 368px x 228px sitting next to each other but each time I try to apply media queries and run a few tests, it doesn't seem to be working at all. How do I go about resolving this issues.

See my code below:

<style type="text/css">

  .block-content-right {
    background-color:#e0e620;
    flex:1;
   }

   @media (max-width: 600px) {
    .field__item {
    width: 100%; 
      }
    }

    @media (min-width: 400px) {
     .field__item {
     width: 100%; 
       }
    }

 </style>

<div >
<p>The people the people the people</p> 
</div>

<div >
<img src="blah blah.jg";> 
</div>

Need some help guys. Thank you.

CodePudding user response：

You need to define the media in the media queries:

@media screen (max-width: 600px) { ... }

CodePudding user response：

Your media queries are working, but at least one of them is always going to be active.

Perhaps what you wanted was this:

@media (max-width: 600px) and (min-width: 400px) {
  /* This will be active if the screen is between 600px and 400px */
.field__item {
width: 100%; 
  }
}

Or maybe this:

@media (max-width: 400px) or (min-width: 600px) {
  /* This will be active if the screen is NOT between 600px and 400px */
.field__item {
width: 100%; 
  }
}

Note: For testing purposes, you may want to use a different CSS rule. With the code you are showing, the "width: 100%;" doesn't do anything because divs have 100% width by default. Try using "border:5px solid red;"

Code to stack elements if the page is narrow: (Going into full screen causes the elements to be placed side-by-side)

@media (min-width: 800px) {
  .half-width {
    display: inline-block;
    width: 49%;
  }
}

<img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Zinnia_elegans_with_Bombus_01.JPG/640px-Zinnia_elegans_with_Bombus_01.JPG" />
<div >Here is some text. More and more and more text. And more and more text. And more and more text. And more and more text. And more and more text. And more and more text. And more and more text.</div>