Font size rem doesn't scale on different screen - html

Question

Fonts and elements don't scale when the screen size is reduced. Following is the code. In the developer tools if I change the root HTML font size, the font's and respective elements scale but when the screen size is reduced it doesn't.
/*
COLORS:
Light green: #7ed56f
Medium green: #55c57a
Dark green: #28b485
font-grey: #777777
*/
* *::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
font-family: "Lato", sans-serif;
font-weight: 400;
line-height: 1.7;
color: #777777;
padding: 3rem;
box-sizing: border-box;
}
.header {
height: 95vh;
/*95% of screen*/
background-image: linear-gradient( to right bottom, rgba(126, 213, 111, 0.8), rgba(23, 133, 96, 0.8)), url(../img/hero.jpg);
background-size: cover;
/*image adapts to the screen*/
background-position: top;
/* top of the image stays the same whatever the screen size*/
clip-path: polygon(0 0, 100% 0, 100% 70vh, 0 100%);
position: relative;
}
.logo-box {
position: absolute;
top: 4rem;
left: 4rem;
}
.logo {
height: 3.5rem;
}
.text-box {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.heading-primary {
color: #ffffff;
text-transform: uppercase;
backface-visibility: hidden;
/*part behind the element gets hidden*/
margin-bottom: 4rem;
}
.heading-primary-main {
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
animation-name: left;
animation-duration: 1s;
animation-timing-function: ease-out;
/* animation-iteration-count: 2;
animation-delay: 2; */
}
.heading-primary-sub {
display: block;
font-size: 2rem;
font-weight: 700;
letter-spacing: 2.1rem;
animation: left 1s ease-out;
}
#keyframes right {
from {
opacity: 0;
transform: translateX(10rem);
}
80% {
transform: translateX(-1rem);
}
to {
opacity: 1;
transform: translate(0);
}
}
#keyframes left {
from {
opacity: 0;
transform: translateX(-10rem);
}
80% {
transform: translateX(1rem);
}
to {
opacity: 1;
transform: translate(0);
}
}
#keyframes button {
from {
opacity: 0;
transform: translateY(2rem);
}
to {
opacity: 1;
transform: translate(0);
}
}
.btn-animated {
animation: button 0.5s ease-out 0.75s;
animation-fill-mode: backwards;
}
.btn:link,
.btn:visited {
text-decoration: none;
text-transform: uppercase;
padding: 1.5rem 4rem;
display: inline-block;
border-radius: 10rem;
transition: all 0.5s;
position: relative;
font-size: 1.6rem;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.5);
/* x-axis y-axis blur color */
}
.btn:active {
transform: translateY(-1px);
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.8);
}
.btn-white {
background-color: #fff;
color: #777777;
}
.btn::after {
content: "";
display: inline-block;
height: 100%;
width: 100%;
border-radius: 10rem;
position: absolute;
top: 0;
left: 0;
z-index: -1;
transition: all 0.4s;
}
.btn-white::after {
background-color: #fff;
}
.btn:hover::after {
transform: scaleX(1.2) scaleY(1.4);
opacity: 0;
}
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<header class="header">
<div class="logo-box">
<img src="img/logo-white.png" alt="Logo Natours" class="logo">
</div>
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">Outdoors</span>
<span class="heading-primary-sub">Where life happens</span>
</h1>
Discover Our Tours
</div>
</header>
<div>
</div>

Answer 1

CSS doesn't work like that. You need media queries in order to set different font sizes based on screen width.
I.e. you need to tell your browser that when the screen is some width or wider (or smaller), change the font size to Y.
This is for when you want the font size to work for everything above 601px
#media screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}
This is for when you want the font size to work for everything below 601px
#media screen and (min-width: 601px) {
div.example {
font-size: 80px;
}
}