What is the best way to arrange elements above and below each other in a single flexbox container?

Currently, I am facing a challenge aligning the number 238,741 and the letter N in Number. There is a padding between the Prize Pool div and the Number Active div. All of these elements are enclosed within a parent container with display set to flex and flex-direction: column. This parent container is then nested within another parent container with display flex and direction set to row. Despite trying different paddings between the divs, they do not maintain their position when I zoom in or out.

I have been struggling for 7 hours to solve this issue but have made little progress even after consulting CSS tricks.

Below is the code structure:

  <Wrapper>
    <HeaderWrapper row alignItems="center">
      <PrizeText variant={TextVariant.subhead}>Prize Pool</PrizeText>
      <Text color={TextColor.primary} fontWeight="600" variant={TextVariant.subhead}>Number Active</Text>
      <GoldText style={{'padding-right': '26%'}} variant={TextVariant.display}>$7,162,245</GoldText>
      <GoldText color={TextColor.primary} variant={TextVariant.display}>238,741</GoldText>
    </HeaderWrapper>
  </Wrapper>
const HeaderWrapper = styled(Box)`
  height: auto;
  align-items: flex-start;
  /* border: 2px solid white; */
  flex-wrap: wrap;
  margin-top: 45px;
  margin-left: 32px;

`;
const MoneyWrapper = styled(Box)`
  height: auto;
  align-items: flex-start;
  /* border: 2px solid white; */
  flex-wrap: wrap;
  margin-left: 32px;

`;

const GoldText = styled(Text)`
  background-image: linear-gradient(98.84deg, #C9882B 0%, #E7CA66 47.71%, #C69935 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  white-space: nowrap;
`;

const PrizeText = styled(Text)`
  padding-right: 152px;
  color: ${props => props.theme.palette.text.primary};
  font-weight: 600;
  white-space: nowrap;
`;

const Wrapper = styled(Box)`
  position: relative;
  border: 2px solid white;
  width: 100%;
  /* justify-content: center; */
  align-items: center;
`;

A Box element functions as a div, with its display property set to flex and accepting the col or row prop to alter the flex direction.

https://i.sstatic.net/TlgzL.png

Answer №1

If you reconsider the arrangement of your components, it could greatly improve the organization. Try putting <PrizeText> and <GoldText> in one container, and <Text> and <GoldText> in another container to see if that helps.

https://i.sstatic.net/KNYvm.png

Think of it as follows:

.wrapper {
  display: flex;
  justify-content: space-around;
  padding: 1rem;
}

.missing-wrapper {
  width: 50%;
}

h1, h5, div {
  border: 1px solid red;
}
<div class="wrapper">
  <div class="missing-wrapper">
    <h5>Prize Pool</h5>
    <h1>$7,162,245</h1>
  </div>
  <div class="missing-wrapper">
    <h5>Number Active</h5>
    <h1>238,741</h1>
  </div>
</div>

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

Button located beneath or above each individual image within the *ngFor loop

With the *ngFor loop, I am able to populate images but now I want to include a button below or on each image. Unfortunately, my CSS knowledge is limited. Below is the code I have: HTML Code <div class="container"> <div ...

Execute script when on a specific webpage AND navigating away from another specific webpage

I created a CSS code that adds a fade-in effect to the title of my website, and it works perfectly. However, I now want to customize the fade-in and fade-out effect based on the page I am transitioning from. My desired outcome: If I am leaving the "Biolo ...

Inquiring about paint-order support for HTML elements using @supports

For those looking to create boldly stroked texts in Firefox and Safari, using paint-order and text-stroke (or the prefixed -webkit-text-stroke) is the way to go. Here's an example: h1 { -webkit-text-stroke: 5px red; paint-order: stroke fil ...

What is the proper way to convert the Vue3 ::v-deep SASS syntax to utilize :deep?

HTML: <template> <form class="bg-white"> <div class="source-field"> ... The original SASS code looks like this: .form::v-deep .source-field width: 129px display: inline-block margin: 0px 2px 5px 2px ...

What could be causing my col-x to not function correctly in Bootstrap?

I am trying to modify my Bootstrap navbar by adding a Login button, but I encountered an issue. When I use col-x classes inside the navbar to separate elements equally, they only cover 50% of the width and no more. However, using col-x classes outside the ...

Slider with a progress bar

Have you ever wondered if it's possible to create a progress bar using an input range? Imagine someone entering a number and the bar moves to the right, changing its background color on the left side of the thumb based on the size of the number. Check ...

When I zoom in, a different div replaces the original div

I have recently delved into the world of HTML and CSS as I embarked on creating my own website. However, I seem to have hit a snag - when I zoom in on the content, it overlaps with the menu. I have scoured the internet for a solution to no avail, so any as ...

What is the best way to implement material theme colors into my Angular2 CSS?

Suppose I want to utilize the mat-primary color as a background for a div using a CSS/SASS class, how should I reference it? My initial thought was: @import '~@angular/material/prebuilt-themes/deeppurple-amber.css'; .my-class{ background-colo ...

Including code that is tailored specifically for the Internet Explorer browser on Windows Phone devices

While testing the Google Maps API on different browsers and devices, I encountered issues with Windows Phone. It turns out that Google Maps is not supported on Windows Phones, resulting in errors. How can I set it up so that instead of displaying the map ...

The combination of loading and scrolling JavaScript code is not functioning properly on the website

I created an HTML webpage that includes some JavaScript code to enhance the user experience. However, I encountered an issue when trying to incorporate a load JavaScript function alongside the scroll JavaScript function on my page. The load script is posi ...

The CSS effect fails to take effect following an AJAX response

After a successful ajax response, I am attempting to apply a jQuery .css effect. However, it seems that this process is not working as expected because I am trying to retrieve the height of a newly created element and then applying it to another newly crea ...

Tips for designing a three-line label: positioning text in the middle, above, and below

I have a label that looks like this: https://i.sstatic.net/q0DaR.png Is there a way to position 'Lorem ipsum' perfectly in the center between 'dolor' and 'amet'? https://i.sstatic.net/aJapG.png - reference image T ...

Bar graph constructed using a pair of div elements

I extracted two values from an array: $target = $data->data[2][32][3]; For this particular example, $target = 9.83%. $clicks = $data->data[1][32][3]; And in this case, $clicks = 7.15%. I have created a bar-like chart using three main div elements ...

What is the process for creating this image using HTML and CSS?

Looking to style an image using HTML and CSS. This is what I attempted: <span>$</span><span style="font-size: 50px;">99</span><span style="vertical-align: text-top;">00</span> However, the result doesn't ma ...

Developing a feature that allows users to switch between different sets of information

I'm currently exploring a new project and attempting to design a toggle that switches between monthly and annual payments based on the user's selection, much like the functionality found here: . At present, I have implemented two sets of price c ...

How can I dynamically resize an element based on the height of its content in Ionic?

Is there a way to make my element expand conditionally? I would like it to expand on click based on the height of its content. This is what the component's HTML looks like: <div class="container" [style.height]="enlarged === true ? ...

Achieving a Full-Screen Three.js Canvas in React: A step-by-step guide on spanning the view height and width of a webpage

I've been working on tweaking the code found in this particular example: How to connect Threejs to React? This is the snippet of code I am focusing on: import React, { Component } from 'react' import * as THREE from 'three' clas ...

Challenges with personalized music player

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/CSS"> #custom{ font-family: monospace; font-size: 16px; max-width: 650px; ...

"Implement a feature in JavaScript that allows users to click on images to navigate

I have a navigation feature on my website that allows me to cycle through images using the following code: <a href="JavaScript:previousImage()">Previous</a> | <a href="JavaScript:nextImage()">Next</a> <span id='num' ...

Tips for modifying jsFiddle code to function properly in a web browser

While similar questions have been asked before, I am still unable to find a solution to my specific issue. I have a functional code in jsFiddle that creates a table and allows you to select a row to color it red. Everything works perfectly fine in jsFiddle ...