CODEWITHSUNDEEP
htmlcssreactjsfrontend
Mats
Mats

Reputation: 111

Why are my colum contents missing padding to the left, and have extra padding to the right?

Edit: Here's the codepen https://codepen.io/maptik/pen/bGKMgpJ

I'm making a react project and I'm trying to use bootstrap to render cards for each item "Producto".

This is how I'm rendering it (I've omitted some of the product details so it's easier to read):

<div className="container bg-color-tienda">
  <div className="center">
    {isLoading ? <h1>CARGANDO PRODUCTOS</h1> : null}
    {!isLoading && productos && productos.length === 0 ? (
      <h5>No hay productos</h5>
    ) : null}
    {!isLoading && productos && productos.length > 0 ? (
      <div className="row">
        {productos.map((producto) => {
          return (
            <div className="col" key={producto.id}>
              <div className="single-producto">
                <div className="card">
                  {/* Thumbnail */}
                  <div className="producto-thumb">
                    {producto.publico === false ? (
                      <div className="producto-tag">No Publicado</div>
                    ) : null}

                    <div className="recipe-image-box">
                      {producto.imageUrl ? (
                        <img
                          src={producto.imageUrl}
                          alt={producto.name}
                          className="recipe-image"
                        />
                      ) : null}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    ) : null}
  </div>
</div>;

The thing is, my custom CSS seems to be messing with the column system. The left padding seems to be missing, while the right padding has increased. This is what it looks like: enter image description here

As you can see, the left padding is nowhere to be seen, while the right padding is.

This imparity is fixed when I remove this item from my custom CSS, which I use :

.single-producto {
  width: 350px;
  border-radius: 1rem;
  box-shadow: 0 5px 15px rgb(0 0 0 / 5%);
  margin-bottom: 30px;
}

Result: enter image description here

I hope you can help me, thanks!

Upvotes: 0

Views: 48

Answers (1)

Miguel Caro
Miguel Caro

Reputation: 298

if this is your desire output... you just need to change the width to 100% on .single-producto class

enter image description here

Upvotes: 1

Related Questions