place two images one above the other

Question

I am looking to update a site. The goal is to put the "reservez" button above the image "logis" My problem is that whatever changes I make I have another style that takes over and my changes do not take effect. So I'm a little desperate and I don't know how to move the 'reservez' element above the image.

Could you help me, I'm just starting out and what may seem obvious to you may not be obvious to me. Thanks in advance. What I have : Actual Images

The code :

<div class="site-branding">
  <div class="logo-main" style="text-align: left">
    <h1 class="site-title semantic">Hotel LOGIS LA BORIE en Périgord Noir</h1>
    <a href="https://hotel-restaurant-borie.fr/" rel="home" class="site-logo"
      ><img
        id="desktop-logo"
        src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/Transparent.png"
        alt="Hotel LOGIS LA BORIE en Périgord noir"
        width="988"
        height="614"
      />
      <img
        id="retina-logo"
        src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/Transparent.png"
        alt="Hotel LOGIS LA BORIE en Périgord noir"
        width="988"
        height="614"
      />
    </a>
    <div class="tel-header">Tel. +33 (0 53 28 97 60</div>
  </div>
  <div class="form-reservation">
    <div class="logo-logis">
      <a
        href="https://hotel-restaurant-borie.fr/wp-content/uploads/2020/12/sejoursur-logis.mp4"
        target="_blank"
        rel="noopener noreferrer"
      >
        <img
          src="https://hotel-restaurant-borie.fr/wp-content/uploads/2020/12/BANDEAU-MAIL-400X100px-SEJOUR-PLUS-SUR-1.jpg"
          alt="lien de réservation"
          style="width: 400px !important"
        />
      </a>
    </div>
    <div class="group-input">
      <div class="logo-logis">
        <a
          href="https://www.logishotels.com/fr/hotel/-254254?partid=568&amp;layout=search&amp;ref=r"
          target="_blank"
          rel="noopener noreferrer"
        >
          <img
            style="width: 105px !important"
            src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/reservez-1.png"
            alt="lien de réservation"
            width="112"
            height="25"
        /></a>
        <a
          href="https://www.logishotels.com/fr/hotel/hotel-borie-254254?PARTID=1012&amp;gclid=Cj0KCQjwvLLZBRDrARIsADU6ojBX_SZoGK4q8u1U_o9D7ym88hIxs1SkPMDf8VeswMveqWXBDF70HFsaApIXEALw_wcB"
          target="_blank"
        >
          <img
            style="width: 105px !important"
            src="https://hotel-restaurant-borie.fr/wp-content/themes/morrison-hotel/images/log-logis.png"
        /></a>
      </div>
    </div>
  </div>
</div>

What I want is : Final result I want

Please don't repeats closed questions. If the duplicate offered does not answer your question then [edit] the original question and explain WHY is does not. — Paulie_D, Dec 17 '20 at 12:15
I apologize I did that because the old question was badly worded, my English was bad ... I can't delete it from there any more, I tried — Onyssius, Dec 17 '20 at 13:31

score 1 · Accepted Answer · answered Dec 17 '20 at 10:55

1

Try below CSS in your Style

.logo-logis {
    display: flex;
    flex-direction: column;
}

answered Dec 17 '20 at 10:55

Aman

1,502
1
8
13

place two images one above the other

1 Answers1