How to make text disappear if it overfits a picture?

Issue

A web page is illustrated by a poem. The text is written in 2 columns over a picture which frames it. You can see it here: http://chemindevie.bzh/accompagnement.html

I wrote the font size using vw units, but the text still resizes slower than its surrounding frame (the picture). If I reduce screen size, it overflows.

By then, anyway, it has become too small to be read, so I would like to say : "If the top of the text goes near the top of the picture (within 5% of the height of the picture, for example), display neither text nor frame".

It doesn't have to be related to the top of the picture, it could just as well be "if the font size <= 8px, display neither text nor picture".

I tried writing the text on the picture and saving them together as one .png file, but it didn't look very good.

How can I do this, please?

All suggestions welcome.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<style>
@media only screen and (max-width: 300px) {
  .image {
    display: none;
  }

(...)

.columns{
  width: 100%;
  column-count: 2;
  }

 /* Container holding the border image and the text */
.container {
  position: relative;
  color: purple;
  margin-right: 35px;
  margin-left: 35px;
}

/* Centered text in border */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  font-size:1.2vw;
} 

</style>

<div class="container">
  <img src="borderFlat.png" alt="Border" style="width:100%;">
<!--  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>-->
  <div class="centered">
  <div class="columns">
<p align="center">
(... poem text here...)
</p>
</div> <!--Closes columns-->
</div> <!--Closes centered-->
</div> <!--Closes container-->

Snippet :

@media only screen and (max-width: 300px) {
  .image {
    display: none;
  }
}

p,
h3,
h4 {
  margin-right: 35px;
  margin-left: 35px;
}

img {
  /*width: 100%;*/
  height: auto;
}

.columns {
  width: 100%;
  column-count: 2;
}


/* Container holding the border image and the text */

.container {
  position: relative;
  color: purple;
  margin-right: 35px;
  margin-left: 35px;
}


/* Centered text in border */

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  font-size: 1.2vw;
}

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>


<div class="container">
  <img src="http://chemindevie.bzh/borderFlat.png" alt="Border" style="width:100%;">
  <div class="centered">
    <div class="columns">
      <p align="center">
        Tu me dis que ta vie n'a aucun sens<br> Que tu souffres en attendant le lendemain<br> Si c'est vraiment l&agrave; ce que tu penses<br> Si tu crois ne pas avoir trouv&eacute; ton destin<br> Si tellement lourde est ta souffrance<br> Si tu veux vraiment
        d&eacute;couvrir ton chemin<br> Accepteras-tu d'entrer dans la danse<br> Et d'y attraper ma main ?<br> Les yeux qui s'ouvrent peuvent &ecirc;tre douloureux<br> L'&acirc;me qui se cherche se pose des milliers de questions<br> Souffres-tu assez
        pour vouloir &ecirc;tre heureux<br> Et au font de toi trouver les solutions&nbsp;?<br> Un &eacute;pais brouillard est l&agrave; qui t'entoure<br> Tu marches droit aveugl&eacute; en pleurs<br> Essuies tes yeux, tu es &agrave; un carrefour<br> Tu
        as le choix entre avancer et attendre<br> Tu as le choix entre vivre et souffrir<br> Il n'y a qu'en toi que tu puisses prendre<br> Le chemin qui changera ton avenir<br> Prends ta d&eacute;cision en toute conscience<br> Car on est seul responsable
        de sa vie<br> Accepte, et marche en confiance<br> Parcours le chemin que tu t'es choisi<br> Que d&eacute;cides-tu ?<br>
      </p>
    </div>
    <!--Closes columns-->
  </div>
  <!--Closes centered-->
</div>
<!--Closes container-->

Solution

To make it completely disappear:

add this

<style>
@media (min-width:1px) and (max-width: 587px) {.hide-small{display:none!important}}
</style>

Then create a div around the text and the picture or add a class name to the existing div (they can have more than one class name).

<div class="hide-small">

Answered By - Alain Reve