Ufdjrw

In order to calculate rems more easily, I set the html font size to 62.5% and set the font size to 1.6 rem in my body. I also have the viewport meta tag. It looks like the meta tag is ignoring the font size set for body, and as a result, the text is much too small on mobile.
Is there any way to fix this without explicitly setting all font sizes used in my media query for smartphones?

View CodePen

 html 
 /* Applying so that 1rem will equal 10px for easier calculation; default font-size in browsers is 16px, and 62.5% of 16px is 10px. 0.1rem now equals 1px, 1.6rem = 16px */
 /* Note: Viewport meta tag bases font size on this 10px so have to explicitly define font sizes in media query, otherwise text will be very small */
 font-size: 62.5%;


body 
 font-family: Muli, sans-serif;
 margin: 0;
 font-size: 1.6rem;


.container 
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-rows: auto auto auto 38rem auto auto 42rem auto auto;

 grid-template-areas:
 "header header"
 "image intro"
 "pricing pricing"
 "banner banner"
 "portrait about"
 "contact contact"
 "banner2 banner2"
 "video video"
 "footer footer";


* 
 box-sizing: border-box;


header 
 /* Unlike position: fixed; doesn't overlap content that follows header */
 position: sticky;
 /* Needed for use of position: sticky; */
 top: 0;
 grid-area: header;
 background-color: #f2f2f2;
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 0 3.8rem 0 4.3rem;


.header-img 
 height: 4rem;
 padding-right: 1.4rem;


.title 
 display: flex;
 align-items: center;


h1 
 font-size: 3.5rem;
 padding: 0 1.1rem 0 0;
 font-family: Satisfy, cursive;
 font-weight: 300;
 color: #dbb42f;


header p 
 font-size: 1.9rem;
 color: #7d7a7a;
 font-weight: 300;


nav ul 
 display: flex;
 list-style-type: none;
 /* Removing because it causes whitespace on the side (in mobile view) after adding position: sticky, top: 0, width: 100% to header */
 margin: 0;


nav ul li 
 padding: 1.8rem;
 font-size: 1.7rem;
 text-decoration: none;


nav ul li a 
 text-decoration: none;
 color: #5c5a5a;


h2 
 font-size: 2.2rem;
 margin: 4rem 0 3.5rem 0;
 text-align: center;
 font-family: "Open Sans", sans-serif;
 letter-spacing: 0.4rem;
 text-transform: uppercase;
 color: #737373;


.bouquet 
 grid-area: image;
 background-image: url(https://raw.githubusercontent.com/nataliecardot/landing-page/master/img/bouquet.jpg);
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;


.intro-text 
 background-color: #faf6dc;
 grid-area: intro;
 display: flex;
 align-items: center;
 /* Less padding on top and bottom to account for extra space above and below p element */
 padding: 3rem 5.5rem 3rem 5.5rem;


.intro-text-paragraphs 
 font-size: 1.75rem;
 text-align: justify;
 font-weight: 300;


.pricing 
 grid-area: pricing;
 background-color: #faf0f0;


.pricing-levels 
 margin: 3rem 0 5rem 0;
 display: flex;
 flex-direction: row;
 justify-content: center;


.pricing-level 
 background-color: #fff;
 text-align: center;
 padding: 5rem;
 margin: 0 1rem;


.pricing-level ul 
 text-align: left;


.pricing button 
 background-color: #c95572;
 cursor: pointer;
 border-radius: 0.4rem;
 color: white;
 font-size: 1em;
 height: 4rem;
 width: 9.6rem;
 margin: 2.5rem 0 1rem 0;
 border: none;


.banner 
 grid-area: banner;
 background-image: url(https://raw.githubusercontent.com/nataliecardot/landing-page/master/img/desk-roses.jpg);
 background-size: cover;
 background-repeat: no-repeat;


.banner2 
 grid-area: banner2;
 background-image: url(https://github.com/nataliecardot/landing-page/blob/master/img/holding-hands.jpg?raw=true);
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;


.portrait 
 grid-area: portrait;
 background-image: url(https://github.com/nataliecardot/landing-page/blob/master/img/holding-camera.jpg?raw=true);
 background-size: cover;
 background-position: center;


.portrait img 
 max-width: 100%;


.about 
 grid-area: about;
 background-color: #faf0f0;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;


.about h2 
 margin-bottom: 1.5rem;


.about-text 
 width: 82%;
 margin: 0 0 5rem 0;
 font-weight: 300;


.contact 
 background-color: #faf6dc;
 grid-area: contact;


.video 
 grid-area: video;
 background-color: #faf0f0;
 padding: 5rem;
 display: flex;
 justify-content: center;


footer 
 background-color: #f2f2f2;
 grid-area: footer;
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 padding: 2rem 0 3rem 0;


footer i 
 padding: 1.6rem;
 color: #7d7a7a;


footer p 
 font-size: 1.6rem;
 letter-spacing: 0.15rem;
 /* Same color as for header p, social icons */
 color: #7d7a7a;
 padding-bottom: 1rem;


.footer-button 
 cursor: pointer;


.form-left 
 display: inline-block;
 text-align: right;
 width: 30%;
 padding-right: 0.9rem;
 margin-top: 1rem;
 /* Matches h2 text */
 color: #737373;


.form-right 
 display: inline-block;
 text-align: left;
 width: 40%;
 vertical-align: middle;


.form-item 
 margin: 1.8rem 0;


/* font-family set in body didn't apply; per https://stackoverflow.com/questions/2874813/why-textarea-and-textfield-not-taking-font-family-and-font-size-from-body "browsers render most form elements (textareas, text boxes, buttons, etc) using OS controls or browser controls. So most of the font properties are taken from the theme the OS is currently using" Adding font-family: inherit is workaround */
input 
 padding: 1.3rem;
 border-radius: 0.2rem;
 border: none;
 font-family: inherit;


textarea 
 padding: 1.3rem;
 height: 15rem;
 border: none;
 border-radius: 0.2rem;
 font-family: inherit;


.contact-button 
 /* This works because buttons are display: inline-block by default */
 text-align: center;


.submit-button 
 background-color: #e2a929;
 cursor: pointer;
 border-radius: 0.4rem;
 color: white;
 font-size: 1em;
 height: 4rem;
 width: 9.6rem;
 margin: 2.5rem 0 4.5rem 0;
 border: none;


i:hover, button:hover 
 transform: scale(1.1);


/* Special styling for smartphones */
@media screen and (max-width: 767px) 
 .container 
 grid-template-columns: 1fr;
 grid-template-rows: auto 40rem auto auto 50rem auto 50rem auto 42rem auto auto;

 grid-template-areas:
 "header"
 "image"
 "intro"
 "pricing"
 "portrait"
 "about"
 "banner"
 "contact"
 "banner2"
 "video"
 "footer";
 

 header 
 flex-direction: column;
 align-items: center;
 

 nav ul 
 display: none;
 

 .intro-text 
 /* 1.75rem normally */
 font-size: 1.6rem;
 padding: 2rem 4rem 2rem 4rem;
 

 .pricing-levels 
 flex-direction: column;
 

 .pricing-levels:last-child 
 margin-bottom: 4rem;
 

 .pricing-level 
 /* left/right margin 1rem normally */
 margin: 1.5rem 4rem;
 

 .pricing-level:first-child 
 margin-top: 0;
 

 .about-text 
 margin-bottom: 3rem;
 

 .banner 
 /* Only using this image for mobile, since it fits better */
 background-image: url(https://github.com/nataliecardot/landing-page/blob/master/img/couple-heart.jpg?raw=true);
 justify-content: center;
 background-position: center;
 

 form 
 text-align: center;
 

 .form-left 
 width: 85%;
 padding-right: 0;
 text-align: left;
 font-weight: bold;
 

 .form-right 
 width: 85%;
 margin-top: 1.2rem;
 

 .form-item 
 margin: 1rem 0;
 

<!DOCTYPE html>
<html>
 <head>
 <meta charset="utf-8">
 <title>Luminescence Photography</title>
 <!-- Ensures proper rendering and touch zooming -->
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <!-- Forces IE 8/9/10 to use its latest rendering engine -->
 <meta http-equiv="x-ua-compatible" content="ie=edge">
 <link href="https://fonts.googleapis.com/css?family=Muli:300,400|Open+Sans|Satisfy" rel="stylesheet">
 <link rel="stylesheet" href="stylesFCC.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
 </head>
 <body>
 <div class="container">
 <header id="header">
 <div class="title">
 <img src="http://i63.tinypic.com/bfq8gz.png" id="header-img" class="header-img">
 <h1>Luminescence</h1>
 <p>Photography</p>
 </div>
 <nav id="nav-bar">
 <ul>
 <li><a class="nav-link" href="#pricing">Pricing</a></li>
 <li><a class="nav-link" href="#about">About</a></li>
 <li><a class="nav-link" href="#contact">Contact</a></li>
 </ul>
 </nav>
 </header>
 <div class="bouquet"></div>
 <div class="intro-text">
 <div class="intro-text-paragraphs">
 <p>Malis omnes in nec, cu accusam efficiantur mel. Eum populo doctus intellegam no, te sonet ancillae reformidans pro. Ei sea congue consul, animal platonem corrumpit te nam. Ex decore offendit est, nihil deterruisset eu quo.</p>
 <p>Lorem ipsum dolor sit amet, consectetuer adipiscing
 elit. Aenean commodo ligula eget dolor. Aenean massa.
 Cum sociis natoque penatibus et magnis dis parturient
 montes, nascetur ridiculus mus.</p>
 <p>Sea at debet maiorum antiopam. Est prima option ne. Choro habemus scaevola cu cum, aperiam aliquid voluptatibus eu vis. His te sint stet quas, stet justo everti nam eu, in mundi comprehensam vis.</p>
 </div>
 </div>
 <section class="pricing" id="pricing">
 <h2>Pricing</h2>
 <div class="pricing-levels">
 <div class="pricing-level">
 <h3>$500</h3>
 <ul>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum dolor.</li>
 <li>Lorem ipsum.</li>
 </ul>
 <button>Select</button>
 </div>
 <div class="pricing-level">
 <h3>$800</h3>
 <ul>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum dolor.</li>
 <li>Lorem ipsum.</li>
 </ul>
 <button>Select</button>
 </div>
 <div class="pricing-level">
 <h3>$1100</h3>
 <ul>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum.</li>
 <li>Lorem ipsum dolor.</li>
 <li>Lorem ipsum.</li>
 </ul>
 <button>Select</button>
 </div>
 </div>
 </section>

 <div class="banner">
 </div>

 <div class="banner2">
 </div>

 <div class="portrait">
 </div>

 <section class="about" id="about">
 <h2>About</h2>
 <div class="about-text">
 <p>Lorem ipsum dolor sit amet, agam dicat perpetua his eu. Et docendi perfecto definitionem mel. Tollit tibique omittam at eos, id his ubique putent assentior. Nobis euripidis vix cu, ut liber oblique has.</p>
 <p>Mei no quidam delicata euripidis. No cibo malorum deserunt usu, has ad dicat vitae possit. Ne affert accumsan eos, vis vide errem temporibus an. Nam cu atqui labore, ea sumo sale sea.</p>
 <p>Sea et assum oporteat eleifend, te prima constituto nec. Ex volumus mentitum vituperata cum, facer libris ut cum, dignissim scriptorem intellegebat usu ei. Menandri prodesset similique vix in, ea duo nihil signiferumque.</p>
 <p>Pro adhuc posse tamquam at, at sed nulla labore, quo vero deseruisse ut. Nam error facilisis torquatos ex. Praesent ac tellus luctus nibh congue dictum. Curabitur non suscipit urna. Phasellus vehicula ligula risus, vitae consectetur eros tempor in.</p>
 </div>
 </section>

 <section class="contact" id="contact">
 <h2>Contact</h2>

 <form>
 <div class="form-item">
 <label for="name" class="form-left">Name</label>
 <input class="form-right" type="text" id="name" placeholder="Enter your name" required>
 </div>

 <div class="form-item">
 <label for="email" class="form-left">Email</label>
 <input type="email" class="form-right" placeholder="Enter your email" required>
 </div>

 <div class="form-item">
 <label for="message" class="form-left">Message</label>
 <textarea class="form-right" id="message" placeholder="Enter a message"></textarea>
 </div>

 <div class="contact-button">
 <button type="submit" class="submit-button">Submit</button>
 </div>

 <div class="video">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/usmw4-XL_u8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen id="video"></iframe>
 </div>

 </form>
 </section>

 <footer>
 <div>
 <a href="#"><i class="fab fa-facebook-f fa-2x"></i></a>
 <a href="#"><i class="fab fa-twitter fa-2x"></i></a>
 <a href="#"><i class="fab fa-instagram fa-2x"></i></a>
 </div>
 <p>© 2019 Natalie Cardot</p>
 <form id="form" action="https://www.freecodecamp.com/email-submit">
 <input name="email" id="email" type="email" placeholder="Enter your email" required>
 <!-- A button with type submit has the same function. I'd use button but here must use input to satisfy freeCodeCamp project test suite -->
 <input class="footer-button" id="submit" type="submit" value="Get started">
 </form>
 </footer>
 </div>
 </body>
</html>