Same CSS styles giving different results in same React component Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Same CSS styles giving different results in same React component without wasting too much if your time.

The question is published on by Tutorial Guruji team.

In my React project I have a component which displays Book Image, I have few buttons under the image Quantity, Price, Description. I am applying same styles, but giving different Quantity display

What changes do I need to make in Styles so that the display is same for all components? I am unable to find any solution

Thank you

Below is css file

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  background: #f1f5f8;
  color: #222;
}

.booklist {
  width: 90vw;
  max-width: 1170px;
  margin: 5em auto;
  display: grid;
  gap: 2rem;
}

@media screen and (min-width: 768px) {
  .booklist {
    grid-template-columns: repeat(3, 1fr);
    /* align-items: start; */
  }
}

.book {
  background-color: white;
  border-radius: 1rem;
  padding: 1rem 2rem;
}

.book h1 {
  margin-top: 0.5rem;
}

.book h4 {
  color: #617d98;
  font-size: 0.75rem;
  margin-top: 0.25rem;
}

.book p {
  margin-top: 0.5rem;
}

.btn {
  background: var(--clr-primary-5);
  color: var(--clr-white);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius);

  font-size: 1rem;

  color: red;
}

.quantity {
  margin-top: 30px;
  margin-left: 180px;
  margin-top: -170px;
}

#decreaseQuantity {
  margin: 20px;
}

.quanityValue {
  margin-top: -45px;
  padding-left: 15px;
}

.price {
  margin-top: 20px;
}

.priceValue {
  padding-left: 100px;
  margin-top: -20px;
}

.button {
  background-color: #4caf50; /* Green */
  border: none;
  color: white;
  padding: 16px 16px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1:hover {
  background-color: white;
  color: black;
  border: 2px solid #4caf50;
}

Index.js

return (
    <article
      className="book"
      onMouseOver={() => {
        console.log(title);
      }}
    >
      <img src={img} alt="" />
      <h1 onClick={() => console.log(description)}>{title}</h1>
      <h4>{author}</h4>
      <button type="button" class="button button1" onClick={clickHandler}>
        Description
      </button>
      <div className="price">
        <button type="button" class="button button1" onClick={viewPrice}>
          {price === 0 ? "View Price" : "Hide Price"}
        </button>
        <h4 className="priceValue">{price > 0 ? <h3>= ${price}</h3> : null}</h4>
      </div>

      <div className="quantity">
        <h3>Quantity</h3>
        <button class="button button1" onClick={increaseQuantity}>
          {"+"}
        </button>
        <button
          class="button button1"
          id="decreaseQuantity"
          onClick={decreaseQuantity}
        >
          {"--"}
        </button>
        <button onClick={resetQuantity}>Reset</button>
        <h3 class="quanityValue">{quantity}</h3>
      </div>
    </article>
  );


Answer

Adding width property to the .book class should solve the issue

.book {
   width: 500px;  // Set according to the requirement
}
We are here to answer your question about Same CSS styles giving different results in same React component - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji