CODEWITHSUNDEEP
javascripthtmlcssreactjs
Isha G
Isha G

Reputation: 37

Same CSS styles giving different results in same React component

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>
  );

Upvotes: 1

Views: 460

Answers (2)

Ashish Shah
Ashish Shah

Reputation: 1132

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

.book {
   width: 500px;  // Set according to the requirement
}

Upvotes: 1

grangle
grangle

Reputation: 1

The problem is that each article ("book" class) in your list doesn't have the same width, so your buttons wrap-around in the middle item to accommodate the space decrease when factoring in viewport width and desired spacing.

Edit: in your css .book properties, you need to specify width.

Upvotes: 0

Related Questions