After running the build process for my project, i noticed some of my CSS was not displayed the same as during development. There is a little difference between the way it appears in development and the way it appears in build.
This is how it appears after build:
Here is my code snap:
return (
<>
<div className="most-viewed-arr">
<button className="button-viewed">MOST VIEWED</button>
<div className="button-next">
<IoMdArrowDropleft className="button-arr" onClick={prevItem}/>
<IoMdArrowDropright className="button-arr" onClick={nextItem}/>
</div>
</div> <hr className="last-hr"/>
<div className="image-carousel">
<IoIosArrowDropleft className="left-arrow" onClick={handlePrev}/>
<div className="image-containment">
{images.slice(startIndex, startIndex + adjustedNumImagesToShow).map((image, index) => (
<img key={index} src={image} alt={`Image ${index + 1}`} />
))}
</div>
<IoIosArrowDropright className="right-arrow" onClick={handleNext}/>
</div>
<div className="most-viewed">
<div className="most-viewed-image">
{mostViewed.slice(Start, Start + adjustedNumImagesToDisplay).map((product, index) => (
<div key={index} className="product-container">
<div className="product-2">
<img src={product.img} alt={`Image ${index + 1}`} />
<div className="text-span">
<p className="productName">{product.name}</p>
<p className="productPrice">{product.price}</p>
</div>
</div>
</div>
))}
</div>
</div>
Here is part of my CSS:
.image-carousel {
display: flex;
flex-direction: row;
position: absolute;
margin-top: -15rem;
}
.image-containment img {
color: black;
position: relative;
opacity: 30%;
width: 11vw;
height: 14vh;
}
.image-containment img:hover {
opacity: 80%;
}
.image-containment {
display: flex;
flex-direction: row;
position: relative;
margin-left: 0.5rem;
border: 2px solid rgb(242, 236, 236);
padding: 2rem 0.5rem ;
gap: 5px;
}
.left-arrow,
.right-arrow {
color: black;
font-size: 2.5rem;
margin-top: 4rem;
opacity: 30%;
}
.left-arrow:hover,
.right-arrow:hover {
opacity: 50%;
}
.left-arrow{
margin-left: 2rem;
}
.text-span {
display: flex;
flex-direction: column;
gap: 10px;
color: black;
width: 7rem;
}
.most-viewed {
margin-top: 2rem;
}
.most-viewed-image {
display: flex;
flex-direction: row;
}
.product-container {
display: flex;
flex-direction: row;
align-items: center;
width: 19rem;
}
.product-2 {
display: flex;
flex-direction: row;
align-items: center;
border: 2px solid whitesmoke;
margin-left: 3rem;
width: 21rem;
gap: 1.5rem;
background-color: whitesmoke;
}
.product-2 > * {
width: 8rem;
}
.productName{
font-size: 14px;
color: gray;
}
.productName:hover {
color: orangered;
cursor: pointer;
}
.productPrice {
color: orangered;
font: 16px san-serif;
font-weight: 700;
}
.button-viewed {
color: white;
background-color: rgb(48, 46, 66);
padding: 0.8rem 1rem;
margin-left: 5rem;
font-size: 15px;
font-weight: 900;
font-family: Tahoma, sans-serif;
letter-spacing: 1px;
}
.most-viewed-arr {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-top: 70rem;
}
.button-next {
display: flex ;
font-size: 24px;
margin-right: 2rem;
gap: 1rem;
}
.button-arr {
border-radius: 50%;
background-color: rgb(233, 229, 229);
padding: 2px;
font-size: 34px;
color: rgb(174, 169, 169);
}
.last-hr {
height: 3px;
width: 100rem ;
color: gray;
background-color: gray;
opacity: 10%;
margin-left: 14.2rem;
}