I have been working on a website for my job, and I have added a "Gallery" button on top of two slideshows. Everything works perfectly fine on the development build, but when it comes to the production build, the button doesn't show up for some reason. I can still inspect and click it, but it remains invisible.
https://i.sstatic.net/qYN3X.jpg
Here is what the React App.js code looks like:
<div>
<div className="navbarContainer">
<Navbar />
</div>
<Switch>
<Route exact path="/">
<div className="homePage">
<div className="coverContainer">
<Cover />
</div>
<div className="servicesButtonContainer">
<ServicesButton />
</div>
<div className="introGalleryContainer">
<SlideshowLeft />
<SlideshowRight />
<GalleryButton />
</div>
<div className="reviewsContainer">
<Reviews />
</div>
<div className="infoContainer">
<Info />
</div>
</div>
</Route>
<Route path="/services">
<div className="servicesContainer">
<Services />
</div>
</Route>
<Route path="/gallery">
<div className="galleryContainer">
<Gallery />
</div>
</Route>
</Switch>
</div>
This is the corresponding CSS:
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-ms-overflow-style: none;
background-color: black;
height: 100%;
width: 100%;
overflow: auto;
}
html {
overflow: hidden;
height: 100%;
}
body::-webkit-scrollbar {
display: none;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
monospace;
}
Here are the styles for the gallery section and main body (I admit that writing all the CSS in a global file was not the best choice, cleaning it up will be quite a task):
.introGalleryContainer .image-gallery-image {
object-fit: cover !important;
max-height: 100% !important;
}
.introGalleryContainer {
display: flex;
justify-content: center;
position: relative;
width: 100%;
border-bottom: thick solid white;
}
.twinSlideshow {
width: 100%;
z-index: 1;
}
.galleryButtonWrapper {
display: inline-block;
border-radius: 1%;
border-style: solid;
border-width: thin;
border-color: white;
background-color: black;
cursor: pointer;
opacity: 85%;
max-width: 30%;
min-width: 20.1%;
margin-top: 20%;
padding: 1.5%;
position: absolute;
z-index: 2;
text-align: center;
color: white;
font-family: "Playfair Display";
font-size: 2vw;
}
.galleryButtonWrapper:hover {
background: #353535;
}
I am using a heavily customized npm slideshow component.
If you need more details (such as React component code), feel free to request them. Any assistance in solving this issue would be greatly appreciated as I am puzzled by what could be causing this problem.