Responsive navbar font-size works on a PC but not on iPhone

Question

Another interesting issue.... I have amended the CSS to make ALL the text responsive on my Bootstrap4 driven site. This is working great, and I have used the below to do it...

@media (max-width: 576px) {
    html { font-size: 0.7rem; }
    th { font-size: 1rem; }
}
@media (min-width: 768px) {
    html { font-size: 0.8rem; }
    th { font-size: 1rem; }

}
@media (min-width: 992px) {
    html { font-size: 0.8rem; }
    th { font-size: 1rem; }
}
@media (min-width: 1200px) {
    html { font-size: 0.8rem; }
    th { font-size: 1rem; }
}

That is at the top of the file.

I then have realised that while the font size on a mobile is nice to read and work with, the menu that is displayed is a little small for sausage fingers.. So I was looking at 'increasing' the size of just the navbar for mobile devices. This I have found to work on a PC screen (made smaller), but for some reason will not play on mobile???

Basically I have added the .navbar-nav .nav-link, and font-size: 2rem; lines to the media section down at line 4270ish

@media (max-width: 576px) {
  .navbar-nav .nav-link,  
  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid {
    padding-right: 0;
    padding-left: 0;
    font-size: 2rem;
  }
}

As said this works on a PC screen... As you draw the window in the font reduces in steps, until it gets to the minimum whereby the menu is collapsed under it 'hamburger' but the font becomes twice as large, just for the menu items.

Just need to make the navbar font larger on a small touch screen to make menus more usable... Please help.

Answer 1

Very bizarre that this has seemingly started to work...

I wonder if it has something to do with caching.....

Oh well.