Troublesome CSS media queries failing to meet expectations

Question

Troublesome CSS media queries failing to meet expectations

I am facing an issue with two divs that are supposed to be 368px x 228px and sit next to each other. Despite my attempts to apply media queries and run tests, I am unable to resolve the issue. Can someone guide me on how to fix this?

Below is my code:

<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 class="block-content-right">
<p>The people the people the people</p> 
</div>

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

https://i.sstatic.net/9dQKV.png

Would appreciate some assistance. Thank you.

html css media-queries

Answer 1

Answer №1

Your media queries are functioning correctly, but one of them will always be active.

It seems like you might have intended for the following:

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

Alternatively, you could use this approach:

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

Note: To test the effect, consider using a different CSS property as 'width: 100%' may not visibly change anything due to divs' default full width appearance. You can try 'border:5px solid red;' instead.

Code for stacking elements in narrow screens: (Elements will align side-by-side on wider screens)

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

<img class="half-width" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Zinnia_elegans_with_Bombus_01.JPG/640px-Zinnia_elegans_with_Bombus_01.JPG" />
<div class="half-width">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>

Answer 2

Your media queries are functioning correctly, but one of them will always be active.

It seems like you might have intended for the following:

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

Alternatively, you could use this approach:

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

Note: To test the effect, consider using a different CSS property as 'width: 100%' may not visibly change anything due to divs' default full width appearance. You can try 'border:5px solid red;' instead.

Code for stacking elements in narrow screens: (Elements will align side-by-side on wider screens)

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

<img class="half-width" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d7/Zinnia_elegans_with_Bombus_01.JPG/640px-Zinnia_elegans_with_Bombus_01.JPG" />
<div class="half-width">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>

Troublesome CSS media queries failing to meet expectations

Answer №1

Similar questions

The oval shape of a Canvas circle in HTML5 is due to its width and height properties

Discover the technique of accessing HTML/CSS toggle switch value in Golang

Incorporating Google Maps Embed: Transforming iFrame into a clickable link on both iOS and Android

Individualize participants and thwart repetition

My JavaScript/Jquery functions are not running as expected

Struggling to locate the distinctive XPath for the button

Activate jQuery when a click event occurs to modify the CSS of a specific

Issues with Javascript Date Function malfunctioning

Using the rvest package to extract data from a password-protected website without the need to log in every time the loop iter

Provide alternative styling through css in instances where the Google Books API does not provide an image

Access a designated tab within a CSS-designed tab system

Ways to increase the values in a textbox

What is the best way to save Arabic text in a MySQL database from an HTML form using PHP?

Combine a fully operational webpage (html, css, js) within a React framework

Ways to create CSS styles dynamically in PHP using database-driven methods

in Vue.js, extract the style of an element and apply it to a different element

Secret button concealed within a div, revealing only a helpful hint

Is there a way to reference a background-image using "<img src>" syntax?

What is the best way to retrieve a specific value from a multi-dimensional JSON object array?

Make the image take up the entire screen in HTML