Media Query not responding in production

Code Feedback
1

The font-size for “very strong” stacks on top of each other instead of being in a row. My media queries work in development, but for some reason when I go to production it does not respond to the font-size media queries. I am viewing the production build on an iphone 13. I used React 18 for this project.

IMG_9552
IMG_95521170×2532 189 KB

Screenshot 2023-08-28 at 12.42.40 PM
Screenshot 2023-08-28 at 12.42.40 PM1048×1688 94.8 KB

2

here are my css media queries

/* ////////////////// */
/* ! 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.1;
    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);
  }
}
3

Dev tools show this.

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

As you can see, the margin value is invalid.

4

thank you for pointing that out. I just corrected it in my code and made a fresh deploy. However, the issue still persists.

5

What is it you want to have happen? What if there isn’t room for all the text on one line?

You can set white-space: nowrap on it but at some point, it might cause an overflow.

6

I would like to decrease the font-sizes so they can fit in their current containers.

The second image shows the ideal version of the font-sizes I would like inside my app. The chrome dev tools shows the desired UI in all mobile widths I view it in. However, when I deploy my app, it seems that the media queries are not taken into effect and the font-sizes remain at the original sizes before the media queries. (as shown in the first image).

At least it does this when I specifically view my app on my mobile device instead of a laptop

I am using manual deploys on netlify and just dropping in the build folder.

7

So the issue is only on your phone?

That makes it harder to test. I can only suggest you use the dev tools and see if you can find out what is going on.

You might try using a clamp function for the font size so no media queries are involved.

2 Likes
8

Thank you, I never knew about clamp functions before. I will study it and test out the results.

9

After reading the article provided below, 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

1 Like
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.