Media Query Not Functioning for Font Size

Question

On the media queries on one of my portfolio pages, regardless of what I set my font to, it won't change for mobile or desktop. I've tried using px, em, and vw and it still won't change. The font size works well on desktop, but I'd like it to be just a little smaller on mobile.

css

<style>
.tiffany {
    /*border: solid green 3px;*/
    width:100%;
    height:100%;
}

.tiffany img {
  width: 100%;
  height: 100%;
  position: relative;
}

@media only screen and (max-width: 480px) {
    .tiffany img {
    width: 300px;
    height: 225px;
    }
}

.tiffany .textbox {
  /*border: solid red 3px;*/
  position: absolute;
  margin: 32px;
  font-weight: bold;
  text-align: left;
  font-size: 5vw;
}

@media only screen and (max-width: 480px) {
    .tiffany .textbox {
      font-size: 2vw;
      position: absolute;
      margin: 0px;
      padding: 0px;
      left: 10px;
      font-weight: bold;
      text-align: left;
    }
}

.tiffany .gradient {
  /*border: solid red 3px;*/  
  left: 0px;
  top: 0px;
  z-index: 1000;
  position: absolute;
  width: 100%;
  height: 100%;
 
  /* other styles (left, top, right, and padding) */
  background: linear-gradient(to bottom, rgba(0,0,0,0.85), transparent);
}

/* read-here */
.read-here {
  position: absolute;
  bottom: 4vw;
  left: 50px;
  background-color: rgb(0, 68, 11);
  color: rgb(0, 68, 11);
  padding: 16px;
  font-size: 16px;
  border: none;
  font color: rgb(255, 255, 255)
}

@media only screen and (max-width: 480px) {
    /* read-here */
    .read-here {
      position: absolute;
      bottom: 4vw;
      left: 10px;
      background-color: rgb(0, 68, 11);
      color: rgb(0, 68, 11);
      padding: 8px;
      font-size: 10px;
      border: none;
      font color: rgb(255, 255, 255)
    }
}

html

</style>

 <div class="tiffany">
  <img class="background-image" src="https://freight.cargo.site/t/original/i/49f84023695066f70817f10d5164bfc85e438f33abd59b9c50a439f6a22f0454/Featured-Page_Tiffany_Alfonseca_Latina_Edit.jpeg">
  <div class="gradient">
  <div class="textbox full-pointer-events-none">
    <h1>Tiffany Alfonseca Pays Homage in Painting</h1>
    <br>
    </div>
   <div class="read-here">
<bodycopy> <b><a href="https://latina.com/tiffany-alfonseca-pays-homage-in-painting/" target="_blank">Read here</a></b> </bodycopy>
  </div>
  </div>
<br></div>

Answer 1

You need to add !important to force the CSS for your @media.

No need to write all the class properties in the @media if no changes

@media only screen and (max-width: 480px) {
    /* No need to write all properties of the class if no changes */
    .read-here {
      font-size: 10px !important;
      padding: 8px; !important
      left: 10px; !important
    }
}

Do the same for the other classes.

Update :

<style>
  .tiffany {
    /*border: solid green 3px;*/
    width: 100%;
    height: 100%;
  }

  .tiffany img {
    width: 100%;
    height: 100%;
    position: relative;
  }

  @media only screen and (max-width: 480px) {
    .tiffany img {
      width: 300px;
      height: 225px;
    }
  }

  .tiffany .textbox {
    /*border: solid red 3px;*/
    position: absolute;
    margin: 32px;
    font-weight: bold;
    text-align: left;
    font-size: 5vw;
  }

  @media only screen and (max-width: 480px) {
    .tiffany .textbox {
      font-size: 2vw;
      position: absolute;
      margin: 0px;
      padding: 0px;
      left: 10px;
      font-weight: bold;
      text-align: left;
    }
  }

  .tiffany .gradient {
    /*border: solid red 3px;*/
    left: 0px;
    top: 0px;
    z-index: 1000;
    position: absolute;
    width: 100%;
    height: 100%;

    /* other styles (left, top, right, and padding) */
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85), transparent);
  }

  /* read-here */
  .read-here {
    position: absolute;
    bottom: 4vw;
    left: 50px;
    background-color: rgb(0, 68, 11);
    color: rgb(0, 68, 11);
    padding: 16px;
    font-size: 16px;
    border: none;
    font-color: rgb(255, 255, 255);
  }

  @media only screen and (max-width: 480px) {
    /* No need to write all properties of the class if no changes */
    .read-here {
      font-size: 10px !important;
      padding: 8px; !important
      left: 10px; !important
    }
  }
</style>

<div class="tiffany">
  <img
    class="background-image"
    src="https://freight.cargo.site/t/original/i/49f84023695066f70817f10d5164bfc85e438f33abd59b9c50a439f6a22f0454/Featured-Page_Tiffany_Alfonseca_Latina_Edit.jpeg"
  />
  <div class="gradient">
    <div class="textbox full-pointer-events-none">
      <h1>Tiffany Alfonseca Pays Homage in Painting</h1>
      <br />
    </div>
    <div class="read-here">
      <bodycopy>
        <b
          ><a
            href="https://latina.com/tiffany-alfonseca-pays-homage-in-painting/"
            target="_blank"
            >Read here</a
          ></b
        >
      </bodycopy>
    </div>
  </div>
  <br />
</div>