Position the two images vertically on top of each other

I'm in the process of updating a website. My goal is to move the "reservez" button above the "logis" image. However, I'm facing an issue where my changes are being overridden by another style, and I can't seem to make it work. I'm feeling a bit desperate and unsure how to proceed with moving the 'reservez' element above the image.

Could you lend me a hand? I'm still new to this, so what might be clear to you may not be as obvious to me. Thank you in advance. Here's what I currently have: Current 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 to achieve : Desired Final Outcome

htmlcsswordpressbootstrap-4styles

Answer №1

Give this CSS a shot for your design

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the proper way to replace a component with a new one?

Below is a snippet of my code where I have included only the crucial parts from selected files. Could you guide me on how to switch between the components sign-in.component.html and forgot.component.html or sign-up.component.html when the user clicks on &a ...

htmlangulartypescriptangular5

Having trouble bringing in icons from the @mui/icons-material library

An error occurs when attempting to run the code. wait - compiling... error - ../../../../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js:1:0 Module not found: Can't resolve '@mui/material/utils' null Note: @mui/material pack ...

javascriptcssreactjsmaterial-uinext.js

A useful tip for jQuery users: learn how to prevent the context menu from appearing when a text box is

Is there a way to prevent the context menu from appearing in jQuery when the text box is disabled? The right-click disable functionality works well in all browsers except for Firefox. Please note that the right-click disable functionality works when the t ...

javascriptjqueryhtmlcss

Switching between height: 0 and height:auto dynamically with the power of JavaScript and VueJS

Currently, I am changing the height of a container from 0px to auto. Since I do not know the exact final height needed for the container, using max-height could be an option but I prefer this method. The transition from 0 to auto works smoothly, however, ...

javascriptcssvue.jscss-transitions

The battle between "this" in HTML and AngularJS ng-model

We have been working on updating an old ColdFusion application that utilized "this" with a formatting function: <td>$<input type="text" name="txtTaxProration" id="txtTaxProration" value="0.00" alt="Tax Proration" onblur="dollarBlur(this);">< ...

htmlangularjs

WP_CONTENT_DIR is not yet defined in this context

Every time I attempt to include a file using ajax, an error pops up: Warning: Use of undefined constant WP_CONTENT_DIR - assumed 'WP_CONTENT_DIR' This is my directory function: function getDirectory(){ return WP_CONTENT_DIR."/plugins"; } ...

ajaxwordpressdirectory

What is the trick to shortening paragraphs with dots...?

There is a p tag, <p> most iconic character in cinema</p> I need to truncate the text after 8 characters, and display dots afterwards. For example: most ic... Is there a way to achieve this using CSS? Any help with AngularJS would also be ...

htmlcssangularjs

What is the process for incorporating an Arabic font into my css code?

After discovering that there is no generator available for Arabic fonts due to the complexity of connecting the letters, I am left wondering if my only option is to purchase them from fonts.com. Does anyone have recommendations for where I can find high-qu ...

cssfontsarabicwebfonts

Firefox: log shows no CSS errors or warnings

I decided to play around and create a website with a completely made-up CSS code: a { foobar: 8888; } Upon opening the page in Firefox, I checked the web console expecting to see errors or warnings. However, surprisingly, there were none. Why is tha ...

htmlcss

Enhance your contact form with WordPress AJAX

I have successfully transformed this template into a WordPress theme. Everything is functioning properly except for the correct URL needed for the AJAX request in the contact_me.js section. $.ajax({ url: "././mail/contact_me.php", ...

javascriptphpjqueryajaxwordpress

Offset the content from the border within a container that includes a scrollbar

The containing element has some content that is set to have a fixed height and overflow: auto; as shown in the JSFiddle link provided. When scrolling through the text, you will notice that the border comes into contact with the text both above and below. ...

cssscrollpadding

Issue with SALON theme causing logo to not display on Wordpress site

It's puzzling why the logo image I uploaded to the WP theme isn't showing up on the front-end. I've reached out to the theme developers multiple times, but it's been two months without a response, and my client, as well as myself, are ...

csswordpressthemes

When a mobile device is rotated, the screen on a jQuery application will automatically shrink

Having trouble with JQM and device rotation on iOS devices. The screen doesn't resize properly when rotated. I have this line in the header to handle display size: <meta name="viewport" content="height=device-height,width=device-width,initial-scal ...

javascriptjqueryhtmljquery-mobile

Tips for displaying the html content saved in the database onto an ejs webpage

This task seems simple, but I'm struggling to solve it. In my Node.js/Express webapp, I have the Quill.js editor installed. It stores my description in MySQL DB like this: <p><strong>This is the quill data. How are we doing dev?</stron ...

javascripthtmlnode.jsexpressejs

Ensure that the innerHTML of the span tag does not contain line breaks

Is there a way to prevent the span tag inside the div with the item class innerHTML from causing a line break, regardless of its length? I also need to ensure that any innerHTML exceeding the item width does not overlap but is hidden. I have attempted usin ...

csswidthlinebreak

Adjusting the size of background images using media queries to scale down accordingly with the size of the browser window while

Currently, I am working on a website project where I am using a background image with Bootstrap 4. However, I am facing an issue where the image does not center properly as it resizes at different breakpoints. I am contemplating whether to use resized im ...

csstwitter-bootstrapimagebackgroundbootstrap-4

Is it recommended to provide translations for ARIA attributes such as aria-label in HTML5?

I have a preference for avoiding the use of ids to enable Selenium to easily locate an element. Instead, I believe Selenium should utilize an accessibility ARIA attribute, making it not only more efficient but also more user-friendly with screen readers. I ...

htmlseleniumaccessibilitywai-aria

Preserving specific HTML elements within an xpath query or extracting the original HTML content from an xpath query

I am currently utilizing the power of xpath technology to extract valuable text from various articles. The goal is to specifically query for text and preserve any existing tags within the HTML structure. An alternative approach involves extracting the orig ...

phphtmlxpath

Loading a specific number of rows in Datatables upon page loading: How to do it?

Recently, I came across a code snippet that uses AJAX to retrieve data from a specific URL and then displays the information in a table. However, I have a requirement to only load and display the first 10 rows of data during the initial page load process. ...

javascriptjqueryhtmldatatables

What are some ways to make the parent div grow based on the width, padding, margin, or box of the child div

Is it possible to expand a parent div with a child div and how can I achieve this? I have created a JSFiddle with some code included. CSS body { background: gray; } div.page { color: white; background: black; max-width: 72em; margin: ...

htmlcss