CSS Flex properties don't match up the ones in Training of React.js

Development
1

I went through training in React.js: https://trainings.boltiot.com/courses/1071071/lectures/31982411

At the last of the module, The Flex properties in CSS are coded to make the Price button go to the right of the Product Item div. But when I try it, it doesn’t work.
I have searched through multiple sites on the net to find out why it has occurred, but it seems that the CSS properties of Flex have been tweaked.

Please help me get the desired result.

2

@aditya2010.kadiyala Can you share the exact code snippet that you feel is tweaked so that we can replicate the issue and pin-point it?

3

Hi @ashwin.salgaocar

This is the code for HTML in React.js:

<div>
       <div class="product-item">Name</div> 
            <div class="product-item__type">
                <p>Type</p>
            </div>
       <div class="product-item__price">Price</div>
</div>

The screenshot of the tutorial claims that it works like this:

This is the code for CSS:

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  padding: 0.5rem;
  margin: 1rem 0;
  border-radius: 12px;
  background-color: #4b4b4b;
}

.product-item__type {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-end;
  flex-flow: column-reverse;
  justify-content: flex-start;
  flex: 1;
}

.product-item p {
  color: #3a3a3a;
  font-size: 1rem;
  flex: 1;
  margin: 0 1rem;
  color: white;
}

.product-item__price {
  font-size: 1rem;
  font-weight: bold;
  color: white;
  background-color: #40005d;
  border: 1px solid white;
  padding: 0.5rem;
  border-radius: 12px;
}

@media (min-width: 580px) {
  .product-item__type {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
  }

  .product-item__type p {
    font-size: 1.25rem;
  }

  .product-item__price {
    font-size: 1.25rem;
    padding: 0.5rem 1.5rem;
  }
}

The screenshot in the tutorial claims that it works like this:

A
A1252×150 14 KB

But from my POV, it appears like this:

B
B1920×294 8.5 KB

Please guide me in this problem. The Flex properties confuse me so much due to this problem.

4

@aditya2010.kadiyala Here is the correct HTML code:

<div class="product-item">
    <div>Name</div> 
    <div class="product-item__type">
        <p>Type</p>
    </div>
    <div class="product-item__price">Price</div>
</div>

Try this and let me know if this fixes your problem.

5

@ashwin.salgaocar

Yes, I just tried it and it works. Thank you! :slight_smile: