Edit: Here's the link to the codepen https://codepen.io/maptik/pen/bGKMgpJ
In my React project, I'm utilizing Bootstrap to display cards for each "Product".
Here is a snippet of how I am rendering it:
<div className="container bg-color-tienda">
<div className="center">
{isLoading ? <h1>LOADING PRODUCTS</h1> : null}
{!isLoading && products && products.length === 0 ? (
<h5>No products available</h5>
) : null}
{!isLoading && products && products.length > 0 ? (
<div className="row">
{products.map((product) => {
return (
<div className="col" key={product.id}>
<div className="single-product">
<div className="card">
{/* Thumbnail */}
<div className="product-thumb">
{product.published === false ? (
<div className="product-tag">Not Published</div>
) : null}
<div className="image-box">
{product.imageUrl ? (
<img
src={product.imageUrl}
alt={product.name}
className="product-image"
/>
) : null}
</div>
</div>
</div>
</div>
</div>
);
})}
</div>
) : null}
</div>
</div>;
However, my custom CSS seems to be affecting the column layout. The left padding appears to be missing, while the right padding has increased. This visual issue can be seen here: https://i.stack.imgur.com/t66Jq.png
Notice the lack of left padding and excessive right padding.
This inconsistency disappears when I remove this portion from my custom CSS:
.single-product {
width: 350px;
border-radius: 1rem;
box-shadow: 0 5px 15px rgb(0 0 0 / 5%);
margin-bottom: 30px;
}
After removal, the result looks like this: https://i.stack.imgur.com/1iovy.png
I would appreciate any assistance with this issue. Thank you!