Media queries Not working on phones, but responsiveness works on desktop

Question

I'm building a site with materialize css.
The default mobile nav menu on materialize breaks on mobile devices for longer entries. Basically, the words will wrap to the next line and overlap the words below it displaying encrypt-o-jumble.

I went and added specific media queries generally formatted like this.

@media screen and (max-width: 870px) {
  .xp-1 {
    min-height: 100px;
  }
}

I tested these in the chrome browser and they are perfectly responsive.

When I view the same site on any kind of phone, or the chrome browsers phone views the media queries activate as if they were on a smaller screen. Tablets are generally big enough not to trigger the media queries.

For example: at 375px on desktop a line will wrap to the line below. With the media queries this the element will expand, pushing the element below down and creating enough space for the whole link.

When viewed on a 375px iPhone x the element will expand, but the text will get smaller leaving blank space.

I have tried adding a few different meta tags:

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

<meta name="viewport" content="width=device-width">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Here's some screenshots of the menu: On the iPhone X Chome view (375px):

Regular Chrome browser view at 375px:

Heres a link to the live site: https://onesourcebenefits.com/

How can I make this display the same on mobile as it does in the browser?

I've read through a ton of info on this site so far, and am continuing to look into this. Any help would be appreciated. :)

Answer 1

In this case materialize was enforcing fixed heights on nested tags within li tags as in the example for their mobile nav menu. I removed the nested ul's and li's and replaced them with divs with padding and hover properties. Now the site is responsive.