Question 240151 in CSS Question posted in
Some basic documentation can be found here.

Css – Media Query not responding in production: React 18 App

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/

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After reading the article provided by Fred, I began to debug iOS in safari and found that there was user-agent-stylesheets enforced upon my h3 tag. I changed my h3 tag to a span and altered any inconsistent CSS and solved my issue


  2. 0

    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’ 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search