HTML/CSS - Adjust font-size when going between desktop and mobile

I have this simple html file and I am trying to understand why my font size doesn't scale down when I move to mobile view. I though font-size:7em would adjust when moving from desktop to mobile.

I know this is super silly, but I can't understand. Do I need to use a @media query?

`

body {
    background: black;
    font-family: "Big Caslon";
    margin-top:3em;
    margin-bottom:3vw;
    margin-left:12vw;
    margin-right:12vw;
  }

section {
    color: white;
    padding: 1em;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%)
  }

.title {
  font-size:7em;
  margin:10px;
}

<html>
  <head>

    <title>ShopDoran</title>
    <link rel="icon" href="">
    <link rel="stylesheet" type="text/css" href="doran.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


</head>

  <section>
    <div class="title">  D O R A N  </div>
    <p style="font-size:2em; margin:10px;">coming soon </p>
  </section>

</html>

Solution

First up you need to make sure you understand the different values css offer us so you can get a better idea of when to use each one.

The correct way to solve this would be for you to set up a @media query in your css file so it can change its values depending on the size of the screen, in this case 600px or smaller. I would also recommend using rem instead of em's, as nesting em's might not always workout as you expect if you don't fully understand how it works, as for rem it is always based on the root font size so it's more predictable,

@media screen and (max-width: 600px) {
  .title {
    font-size: 2rem;

  }

A more modern approach and a bit easier but sometimes chaotic would be to approach the font-size: with vw values which takes the viewport width as a value and depending on the amount of screen space the font will grow, this is not always recommended as text can get to big so you need to limit the max size for things not to get to crazy which you can do with the clamp:() function which is a more reliable way of using vw units in font-size: and keeping everything under control, you would end with something like this:

.title{font-size: clamp(2rem, 5vw+1rem, 7rem);}