In React development, a div (button) is visible, but in the production build, it becomes hidden from

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.

Answer №1

Upon thorough examination of each line, I identified the issue at hand. It appears that create-react-app contains a glitch that incorrectly sets the opacity value to 1%. An easy solution is to temporarily use decimal values (until a fix is released). For example, if you desire an opacity of 85%, input 0.85 instead and apply the same logic for other percentage values.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Customizing the language parameter for the apply button script on LinkedIn

Our company's website features the AWLI button which allows users to apply for jobs using their LinkedIn profile. <div name="widget-holder"> <script type="text/javascript" src="https://www.linkedin.com/mj ...

Click on the hyperlink to adjust the background size of an inline list item

I created a navigation bar using inline display for the li elements. I want my last column to have a defined height background. However, it is only displaying a background behind the name of the column. Here is the relevant section from style.css: #navi ...

Multi-object retrieval feature in Material Dialog

I am encountering an issue with Material Dialog when confirming the action to "remove row" in a table. Initially, removing from the dialog works fine and deletes a row. However, after closing the dialog and re-calling it for the second time, the removal ac ...

Unforeseen outcomes when setting background colors with Anime.js

I've recently started experimenting with Anime.js. I have a piece of code that I'm using to animate a div element with an id of a. anime({ targets: "#a", translateX: 250, color: "#fff", backgroundColor: "hsl(200, 50%, 50%)", ...

Adjust the viewport to fit the width of the screen and display large images

Currently, I am experimenting with using a WebView to display a large image while incorporating multitouch functionality to prevent memory crashes. My webView is configured as follows: setInitialScale(20); WebSettings settings = getSettings(); ...

methods for pausing music through a toggle button in a React JS application

I am facing an issue with the following shortcode for playing a song on a toggle button. The problem occurs when I try to pause the music and it does not stop as expected. import { React, useState } from 'react'; import './audio.css&apos ...

css: Aligning fonts horizontally when they have varying sizes

First time asking a question on this platform! I'm attempting to achieve a "pixel perfect" horizontal alignment of two lines of text, with each line having a different font size. <style type="text/css"> * { font-family: sans-serif;} ...

Why isn't the field I added to my state functioning properly?

Can anyone explain why I am getting names without the added selected field??? I can fetch names from my API JSON (1) and I'm attempting to modify it by adding the selected field (2). export default function Display() { ... const init ...

Create a unique SVG path by eliminating any overlapping shapes directly within the code

I have an SVG image representing the Switzerland flag, with a cross made of two overlapping rectangle paths. I need to make it look more like the real flag by removing two vertical lines in the center of the cross. Is there a way to modify the code to eli ...

How to display only a portion of content using UI Bootstrap collapse feature

In my Angular.js application, I currently have a row of buttons that open up new routes to display partial views. Now, I need to modify some of these buttons to trigger a ui.bootstrap Collapse feature with the view inside it. The template code from the ui. ...

How can I eliminate the black border-color that appears when the React Material Button outline is clicked, even though I have not explicitly set it?

import React from 'react'; import Button from '@material-ui/core/Button'; export default function NoElevationButton() { return ( <Button variant="contained" color="primary" disableElevation > Disable elevation < ...

The border of the cell in the top row only partially overlaps with the margin area

Have you noticed how the left border of the first cell doesn't line up with the margin area of the table? This peculiar phenomenon seems to occur only in the first row: https://i.stack.imgur.com/qMWCh.jpg In all other rows, the border aligns proper ...

Is there a way to retrieve the hand-drawn lines at no cost in the form of a list, with each line represented as a collection of coordinates

I am currently contemplating the idea of utilizing fabric.js for an online handwriting recognition system. In order to make this system work, I need to transmit the sketched lines as a collection of lines, where each line consists of several points. If a ...

Nginx may not fully support React app routing configurations

I have a react application built with create-react-app that utilizes react-router-dom and operates successfully within a Docker container on my development branch. After building and running the container using Dockerfile.dev, I navigate to /mail where a t ...

Issue with debounce function failure in handling onChange event for a controlled input field

Currently, I am experimenting with the Material UI React framework. I recently moved my application to Material UI using TypeScript. However, I seem to be encountering an issue with the debounce function when used in the onChange handler for input fields. ...

What is the best way to position the list element to align with the top of a div container?

To see a live example, visit this link. My goal is to create a line that separates two li elements within a nested ul. However, the line ends up taking the width of the container ul instead of the div containing the entire structure. In the provided examp ...

Is it possible for a destructed assignment to yield multiple objects?

I am faced with a collection of Storybook stories and a function that produces a ComponentStory object. I am aiming to find a concise method for duplicating multiple stories without resorting to repetitive code like this: export const Default = bindStory(T ...

Unexpected server error encountered during navigation of php pages

I am using PHP to retrieve data from a MySQL table and display it in an HTML table. Each row in the table has a 'remove' button that triggers a PHP script (remove.php) to delete the corresponding row from the database table and return to admin.ph ...

Tips on invoking an action and updating the state within the componentDidUpdate() lifecycle method in React and Redux without causing an infinite loop

Within my project, there is a shared navigation bar that includes an input text field: <input placeholder="Search Assets" type="text" id="searchTerm" onChange={this.searchAsset} value={this.state.searchV ...

One method to prevent a component from rendering until it has received its necessary data

Is there a way to delay the search feature in the ToolkitProvider until the data is available? I have a table component that utilizes the search feature within a ToolkitProvider. However, when I include the search prop in the ToolkitProvider, my reducer r ...