Distorted styles after build process in React and Vite

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

This is how it looks in development:

The font is different for the price and the font weight is different for the title.

Some of the buttons are completely different.

Some of the icons in the sidebar are completely different.

How are you adding the font/icons you used?


I assume the layout/location of the view more element is depending on some action by the user?


We likely need a repo with all the code so we can test it.

This is my repo: GitHub - create2000/E-comm

My icons are from React-icons and I’m importing them into my component.

I don’t see all that much difference between your prod and running it locally. I’m also not sure what you are specifically asking about.

The location of the image-carousel is broken in production because you have a semicolon at the bottom in Header.css. When the css is combined into the single file it breaks and the image-carousel class is never applied (which comes next in the build output).

Header.css

    .Account ul {

        background-color: white;
        color: black;
        padding: 2rem;
        display: block;
        position: absolute;
        z-index: 1;
    }
};

Brands.css

.image-carousel {
    display: flex;
    flex-direction: row;
    position: absolute;
    margin-top: -15rem;
    
}

In production:

    .Account ul {
        background-color: #fff;
        color: #000;
        padding: 2rem;
        display: block;
        position: absolute;
        z-index: 1
    }
}

; .image-carousel {
    display: flex;
    flex-direction: row;
    position: absolute;
    margin-top: -15rem
}

It is very possible that other broken CSS is working in dev but breaks in the build (for various reasons).

Validate your CSS and please use Prettier to format your code.


Your layout is also just broken. I would suggest you look more into how to do proper layouts in CSS. You are doing a bunch of things that you shouldn’t be doing (fixed values, large margins use for positioning, absolute positioning, etc.).