Flexbox design - positioning elements flush against each other

I'm struggling with creating a layout for my react component, specifically aligning the images vertically. The current layout is influenced by the Audio component: https://i.sstatic.net/vjn4K.png

My goal is to have both images aligned vertically like this: https://i.sstatic.net/QfyOn.png

#finish-content {
    width: 100%;
    position: relative;
    border: 1px solid black;
    border-radius: 25px;
    margin-left: 1.5rem;
    text-align: center;
}

.game-finish-flex {
    display: flex;
    flex-direction: column;
}

.game-finish-upper {
    display: flex;
    justify-content: center;
}

.game-finish-image, .game-finish-image-secundar {
    border-radius: 15px;
}

.game-finish-image { 
    margin-top: 1rem;
    width: 300px;
    height: 200px;
}

.game-finish-image-secundar {
    width: 300px;
    height: 150px;
}

.message-finish {
    border: 1px solid black;
    border-radius: 1.5rem;
    width: 50%;
    margin: 1.5rem auto;
    height: 2.5rem;
    width: 300px;
    line-height: 2.5rem;
}

.circle-audio {
    color: #fff;
    border: 1px solid black;
    border-radius: 50%;
}

.fa-stack-custom {
    cursor: pointer;
    margin-left: 1rem;
}

span.audio-gameinfo {
    margin-left: 0rem;
    margin-bottom: 0.5rem;
}

.audio-finish {
    margin-top: 1rem;
}

.game-details-image {
    margin-top: 2rem;
    border-radius: 15px;
    width: 15rem;
    height: 15rem;
}

.game-answers-image {
    border-radius: 15px;
    width: 15rem;
    height: 15rem;
    margin: 0 !important;
    padding: 0 !important;
}

.draggable-game-image {
    border-radius: 15px;
    margin: 0 1rem 1rem 1rem;
}

@media (max-width: 800px)
{
    .game-answers-image {
        width: 12rem;
        height: 12rem;
    }
}
<div id="quiz-container">
    <div class="row">
        <div id="finish-content">
            <div class="game-finish-flex">
                <div class="game-finish-upper">
                    <div class="game-image-wrapper"><img class="game-finish-image" src="/Untitled.png" alt="test"></div>
                    <span class="fa-stack fa-stack-custom audio-finish"><i
                            class="far fa-circle fa-stack-2x circle-audio"></i><i
                            class="fa fa-volume-up fa-stack-1x"></i></span>
                </div>
                <div class="message-finish">test</div>
                <div class="game-image-wrapper"><img class="game-finish-image-secundar" src="/Untitled.png" alt="test">
                </div>
            </div><a href="/quiz/gamefinish"><button class="btn btn-outline-success next-button">Next</button></a>
        </div>
    </div>
</div>

Is there a way to achieve the layout in the second picture without removing the Audio component?

Thanks.

htmlcssreactjs

Answer №1

Based on the code and image provided, here is a step-by-step solution to addressing the issue. Firstly, removing the audio component to prevent interference with the alignment of the box is recommended. Ensuring both images have the same width relative to their parent container will create a more visually appealing layout.

  1. To keep the audio within the upper image's div, employ negative margins or positioning techniques such as position:absolute, right:0, margin-right: -10%, transform: translateX(10%) for precise placement.

  2. Alternatively, adjusting the parent container's width to 50% and setting margin: 0 auto will center it. Using align-items: flex-start will align the items without trying to distribute the widths evenly using flexbox properties.

Answer №2

Is there a specific location for the audio icon or can it be placed anywhere? If it can be placed anywhere, you can use this code snippet.

#finish-content {
      
      border: 1px solid black;
      border-radius: 25px;
      margin-left: 1.5rem;
      text-align: center;
    }

    .game-finish-flex {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .game-finish-upper {
      display: flex;
      justify-content: center;
    }

    .game-finish-image,
    .game-finish-image-secundar {
      border-radius: 15px;
    }

    .game-finish-image {
      margin-top: 1rem;
      width: 300px;
      height: 200px;
    }

    .game-finish-image-secundar {
      width: 300px;
      height: 150px;
    }

    .message-finish {
      border: 1px solid black;
      border-radius: 1.5rem;
      width: 50%;
      margin: 1.5rem auto;
      height: 2.5rem;
      width: 300px;
      line-height: 2.5rem;
    }

    .circle-audio {
      color: #fff;
      border: 1px solid black;
      border-radius: 50%;
    }

    .fa-stack-custom {
      cursor: pointer;
      margin-left: 1rem;
    }

    span.audio-gameinfo {
      margin-left: 0rem;
      margin-bottom: 0.5rem;
    }

    .audio-finish {
      position: relative;
      display: flex;
      top: 60px;
      right: -50px;
      align-content: flex-end;
      justify-content: flex-end;


    }

    .game-details-image {
      margin-top: 2rem;
      border-radius: 15px;
      width: 15rem;
      height: 15rem;
    }

    .game-answers-image {
      border-radius: 15px;
      width: 15rem;
      height: 15rem;
      margin: 0 !important;
      padding: 0 !important;
    }

    .draggable-game-image {
      border-radius: 15px;
      margin: 0 1rem 1rem 1rem;
    }

    @media (max-width: 800px) {
      .game-answers-image {
        width: 12rem;
        height: 12rem;
      }
    }
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css"
    integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


  <title>home</title>

</head>

<body>
  <div id="quiz-container">
    <div class="row">

      <div id="finish-content">
      
     


      
        <div class="game-finish-flex">
          <div class="game-finish-upper">
            <div class="game-image-wrapper">
             <div class="audio-finish">
              <span class="fa-stack fa-stack-custom">
                <i class="far fa-circle fa-stack-2x circle-audio"></i>
                <i class="fa fa-volume-up fa-stack-1x"></i>
              </span>
      </div>
              <img class="game-finish-image" src="https://i.sstatic.net/Rkwue.png" alt="test">
            </div>

          </div>
          <div class="message-finish">test</div>
          <div class="game-image-wrapper"><img class="game-finish-image-secundar"
              src="https://i.sstatic.net/4QcJ1.png" alt="test">
          </div>
        </div>

        <a href="/quiz/gamefinish"><button class="btn btn-outline-success next-button">Next</button></a>
      </div>
    </div>
  </div>

</body>


</html>

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

Creating an HTML element with jQuery using the before() method

Here is the code snippet I am working with: $(document).on("click", "#add", function() { console.log("clicked"); $(this).before('<lable>'+ current +'.</label><input type="text", id="option"><br>'); ...

javascriptjqueryhtml

Creating a clickable map for a PNG image: Step-by-step tutorial

My goal is to create a interactive map similar to this one. Click here for the image ...

javascripthtmlclickable

Tips on customizing the easing functions for a drawer in material-ui

Is there a way to modify the easing functions that a drawer utilizes? I am trying to set both ease functions to the same value. I attempted using MuiThemeProvider, but it didn't have any effect. Additionally, the Drawer component does not accept tran ...

reactjsmaterial-ui

Filtering date ranges in React.js and dynamically rendering data

I am looking to dynamically render the data based on filtering from the start date to the end date. The logic should display one date value at a time when filtering between the specified dates, showing E_NodeB Cell_Name Date E_RAB_Setup_Success_Rate Data_T ...

mysqlnode.jsreactjs

Make the button appearance change when being clicked different from when being hovered over

I'm trying to create a button that changes background color when hovered over, but maintains the button color without a background color when clicked. This is what my current code looks like: .windowButton:hover { background-color:#1a82b8; } .win ...

csshover

Reorganize the layout of elements based on the array of element IDs

I have a task to complete that involves two 'ul' elements with unique id's and 'li' elements within them. <div id="sr"> <ul id="li-fav"> <li id="app-1">a</li> <li id=" ...

javascripthtmldomdocumentfragment

Guide to attaching a mouse click event listener to a child element within a Polymer custom component

I'm currently facing an issue where I am attempting to attach a click listener to one of the buttons within a custom element during the "created" life cycle callback (even attempted using the "ready" callback with the same outcome). Unfortunately, I ...

javascripthtmlpolymerpolymer-1.0

Encountering a problem: React is returning null when utilizing JavaScript import maps to bring in a project to an already existing project

I am in the process of developing Project A, which focuses on creating reusable components through Vite. The main objective is to export these components to other projects that already exist. In order to accomplish this task, I have employed JavaScript imp ...

reactjstypescriptvitebundling-and-minificationmicro-frontend

JS switch for numerous container elements

How can I create a toggle slider in HTML for multiple elements displayed using foreach? Each element should open a div block with specific information and have a close button. Unfortunately, I haven't been able to find any suitable code to achieve thi ...

javascripthtmlcss

What is the best way to show a pop-up message to a visitor on my site for the first time

I am seeking a way to showcase a popup the first time a user lands on my website. At present, the popup appears only upon page refresh. Check out the demo below: var popupdisplayed = false; jQuery(function() { jQuery('[data-popup-close]').o ...

jqueryhtmlcss

Clicking on the menu to reveal the dropdown options using JavaScript

I have created a drop-down menu for my website, but I am facing an issue. When I click on the links again, it does not work properly because I lack expertise in JavaScript. I would appreciate any help and suggestions from all of you. Thank you for your tim ...

javascriptjqueryhtmlcss

What is the best way to make a flexbox stretch to fill the entire screen

Can someone guide me on how to ensure my flexbox expands to fill the entire screen? I am working on a website and I want to eliminate any empty spaces from it. >> https://i.sstatic.net/uAooe.png I have attempted setting margin and padding to zero b ...

htmlcssflexbox

Ways to create more space between text and images with Bootstrap 5

Is there a way to adjust the spacing between descriptive text and an image on a webpage? I've tried fixing it, but it didn't work. How can I ensure that my text is properly separated from the image? Thank you. <!DOCTYPE html> <html lang ...

htmlcssbootstrap-5

Injecting sinon js into an application within an iFrame: a step-by-step guide

I am looking to implement ajax requests testing in my application. The application is running within an iframe, and my goal is to have the iframe's wrapper page test the application using sinon (which will send the response). I attempted to include ...

javascriptajaxhtmliframesinon

Custom MUI theme fails to supersede palette settings

I am currently experimenting with overriding the default theme in MUI for a small test before integrating it into a larger project. Despite following the documentation, I am facing issues with applying the new colors from my theme to a child component. My ...

reactjsmaterial-ui

React dynamic dropdown selection based on previous dropdown values

I have implemented 3 react input fields that are populating data to a useState Hook <FormControl fullWidth> <InputLabel>Primary Goal</InputLabel> <Select ...

javascriptreactjsmaterial-ui

Bootstrap overrides the color of the calendar year in jQuery UI

I am facing an issue where the CSS styles of my jQuery UI calendar are being overridden by the Bootstrap CSS styles. Take a look at the screenshot provided. As you can see, the text color of the calendar's year is not black as intended. https://i.ss ...

csstwitter-bootstrapjquery-ui

The height and rows of a textarea element do not adjust properly to the content in FireFox

Looking for a way to create a textarea with dynamic height that adjusts as the user adds new content? The resize property is set to none and overflow is hidden. It seems to be working correctly in Chrome, but Firefox is presenting some mysterious issues wi ...

htmlcssfirefox

Leveraging a Keyframes Definition from an External Source

Font Awesome has a special spin animation for elements that have the class fa-spin. Taking a closer look at the CSS code, you can see that the spinning effect is achieved through keyframes under the same name, fa-spin. Instead of creating a new animation ...

csswebkit-animation

How can I use JavaScript to sort through an array and organize the data into groups?

Below is an array that I currently have: Status=["active","inactive","pending","active","completed","cancelled","active","completed"] I am looking to achieve the following result: StatusInfo=["active":3,"inactive":2,"pending":1, "completed":2, "cancelle ...

javascriptjqueryreactjstypescriptsharepoint