Media Query not responding in production: React 18 App

Question

My media queries work in development, but when I go to view in production it does not respond to the font-size media queries. I am viewing the production build on an iPhone 13 and suspect the issue may be specifically for mobile devices only. I used React 18 for this project and deployed manually by dropping a build folder on Netlify.

I have the proper meta tag in my HTML,

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

I have a proper hierarchy for my media queries in CSS,

/* ////////////////// */
/* ! MEDIA QUERIES XS DEVICES */
/* ////////////////// */

@media (max-width: 380px) {
  .include span {
    word-spacing: 6px;
    font-size: 1.1rem;
  }

  .medium-contianer {
    font-size: 0.9rem;
  }
}
@media (max-width: 370px) {
  .medium-contianer,
  .strength,
  .bar-container {
    margin: 0 0.35rem;
    font-size: 0.85rem;
  }
}
@media (max-width: 330px) {
  .include span {
    word-spacing: 4px;
    font-size: 0.9rem;
  }
}

@media (max-width: 320px) {
  .medium-contianer,
  .strength,
  .bar-container {
    margin: 0 0.35rem;
    font-size: 0.75rem;
  }

  .include span {
    word-spacing: 4px;
    font-size: 0.8rem;
  }
}

@media (max-width: 300px) {
  .medium-contianer,
  .strength,
  .bar-container {
    margin: 0 0.1rem;
    font-size: 0.7rem;
  }

  .include span {
    word-spacing: 4px;
    font-size: 0.8rem;
  }
}

/* ////////////////// */
/* ! MEDIA QUERIES TABLET DEVICES */
/* ////////////////// */

@media (min-width: 550px) {
  .main-container {
    width: 80vw;
    margin: 2rem auto;
  }
}

/* ////////////////// */
/* ! MEDIA QUERIES DESKTOP DEVICES */
/* ////////////////// */

@media (min-width: 768px) {
  .medium-contianer,
  .strength,
  .include span {
    font-size: 1.35rem;
  }
}

@media (min-width: 900px) {
  .main-container {
    width: 50vw;
    margin: 2rem auto;
  }

  .strength-container {
    height: 2rem;
  }
}

@media (min-width: 1700px) {
  .main-container {
    width: 25vw;
    margin: 50rem auto;
    transform: scale(2);
  }
}

and in all Chrome dev tool media displays it is formatted exactly how I want. However, when I viewed the production build on my phone, none of the media queries remained intact.

output on chrom dev tools

output on my mobile device

link to my repo https://github.com/cassius2828/password-generator/tree/main/src

link to deployed app https://password-generator-creynolds.netlify.app/

Answer 1

The problem here is not your media queries (they're working just fine), it's more a cross-browser compatibility problem. I guess you have an iphone? Browsers unfortunately don't all work the same, even the same browser on two different devices (iOS vs Android for example).

Here are some details you could check out about cross-browser compatibility & why it exists: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Introduction

Do you have any ways to test your application on different devices before deploying your code in production? If so, I would highly recommend doing that and adjusting your css values accordingly.

My solution for you right now would be to start by lowering the left-right margins of .strength & .bar-container to see if it gives more space to the 'VERY STRONG' element so it could stay on one line. It would be a start!

And just because I'm here: you wrote 'medium-contianer' for you class instead of 'medium-container' :)