Pop-up image : je n'arrive pas à intégrer l'image au-dessus du texte

[mriou]

Bonjour à tous,

J'essaie de créer une pop-up pour mon site et je souhaite mettre une image puis avoir mon texte en dessous.

Je préfère passer par le bouton "image de contenu" pour intégrer l'image, de cette manière je peux faire en sorte que la pop-up s'adapte aux différentes tailles d'écran avec quelques lignes de CSS.

J'ai bien intégré une image et ai fait ces lignes de code sauf que le résultat reste toujours le même, l'image reste en-dessous : 

#apc_modal_1 {
  display: flex;
  flex-direction: column;
}

#apc_modal_1 img {
  order: -1;
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 30vh;
}
.apc-popup-1 .fancybox-inner {
  overflow-y: auto !important;
}

@media (max-height: 600px) {
    #apc_modal_1 img {
        max-height: 20vh;
    }
}
@media (max-height: 530px) {
    #apc_modal_1 img {
        max-height: 15vh;
    }
}
@media (max-height: 490px) {
    #apc_modal_1 img {
        max-height: 10vh;
    }
}

 

Avez-vous une idée de comment régler le problème ?

Merci d'avance.