Font size on mobile is differenet on every sub-page, despite one size set for all

Question

I'm going a bit mad here, I've set the font size to 1.05 rem across the website but when viewing each subpage on mobile (iPhone in my case) - each page shows different size. Any advice?

Desktop view is FINE

Distro page shows the paragraph in small font, whereas the catalog page quite large. They should be identical, I cannot figure out what am I doing wrong here.

Code below:

DISTRO page:

<div class="wrapper">

<div class="copy">
    <p>I have a ton of tapes, CDs and records for sale. Will be listing them here in the coming days.</p>
</div>
</div>

CATALOG page:

<div class="wrapper">

<div class="copy">
    <p>Support the label and buy directly, message us via <b>[email protected]</b> and we can take it from there.</p><p>Alternatively our stock is also available on Bandcamp > <a href="https://daggerforest.bandcamp.com/" target"_blank"><b>daggerforest.bandcamp.com</b></a></p>

<div class="divider">✧</div>

<div class="cat-rel"><b>DF000</b> > <a href="https://daggerforest.bandcamp.com/album/dagger-forest" target="_blank">V.A.<span class="tab"></span>Dagger Forest</a><br><span class="descr">
CDR / 20 copies / 「12.07.2014」</span></div>
<div class="cat-rel"><b>DF001</b> >  <a href="https://daggerforest.bandcamp.com/album/when-you-burn" target="_blank">Daan Mol<span class="tab"></span>When You Burn</a><br><span class="descr">
C12 / 50 copies / 「09.10.2014」</span></div>
<div class="cat-rel"><b>DF002</b> >  <a href="https://daggerforest.bandcamp.com/album/ep1" target="_blank">E Y E S H A D O W S<span class="tab"></span>EP1</a><br><span class="descr">
C17 / 50 copies / 「05.02.2015」</span></div>
<div class="cat-rel"><b>DF003</b> >  <a href="https://daggerforest.bandcamp.com/album/heru-ra-ha" target="_blank">Mascara<span class="tab"></span>Heru-Ra-Ha</a><br><span class="descr">
C22 / 50 copies / 「29.07.2015」</span></div>
<div class="divider">✧</div>
  <p><div  class="middle"><img src="https://witch-house.com/tape.jpg" class="banner-sm"></img></div>
</div>
</div>
</body>

CSS

body {
  background-color: #fff;
  text-align: center;
  color: #000;
  font-size: 16px;
  font-family: "Syne Mono", monospace;
}

.wrapper {
  max-width: 960px;
  padding-right: 10px;
  padding-left:  10px;
  margin: 0 auto;
}

a {color: #000000;
    text-decoration: none;}

a:hover {color: #000000;
    font-weight: 700;
    text-decoration: none;}
    
.middle {   text-align: center;
}

.copy  {width:100%;
    max-width:780px;
    margin: 0 auto;
    padding-bottom:20px;
    background-color:#fff;
    text-align:left;
  font-size: 1.05rem;
}

.divider {  text-align: center;
  color: #000;
}
.tab {
    display: inline-block;
    margin-left: 2em;
}
.descr {font-size:1rem;}

.cat-rel {margin-bottom:20px;}

Answer 1

The rem unit refers to the font-size setting for html, and if that isn't defined in the styesheet, it refers to the default size of the browser (which can be changed in the browser settings, but that's not done very often)

The em unit refers to the default font-size of the current element (div, p, h1, h2, h3, li etc.), also something that can be defined by the programmer, but if it's not, it's defined in the browser default settings.

So although you define a font-size for body, you didn't for html, which most likely causes the differences you see.

Try to define the font-size for html, I'm sure the result will at least be better than with your current settings.