Div on Netlify build is JUUUUUUUUUST barely visible, and a page is coming up as not found

One of my divs that show up great on my local machine aren’t visible on the netlify build (you can juuuuuuuuuuuuust make out the outline of the squares). They show up just fine on the Heroku version, and my local version.

Also, one of my pages (/card1) are triggering a “page not found” error from netlify. Again, the page shows up just fine on my local build and heroku build.

My CSS for the element in question:

    .Container {
    @media (max-width: 700px){
        display: none;
    }
    @media (max-width: 900px){
        width: 240px;
        right: 70px;
    }
    position: absolute;
    right: 200px;
    top: 1%;
    display: flex;
    width: 345px;
    justify-content: space-between;
}

@keyframes glidein {
    0% {
        transform: translate(-100%);
    }
    100% {
        transform: translate(0%);
    }
}
.Container > * * {
    opacity: 60%;
    border-radius: 8px;
}
.Col1 {
    @media (max-width: 900px){
        height: 365px;
        width: 65px;
    }
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 520px;
    width: 95px;

    margin-top: 75px;
}
.Col1 > div {
    height: 18%;

}
.Col1 :nth-child(1){
    background-color: #466792b6;
}
.Col1 :nth-child(2){
    background-color: #21354edc;
}
.Col1 :nth-child(3){
    background-color: #38495ea8;
}
.Col1 :nth-child(4){
    background-color: #4d6a8da2;
}
.Col1 :nth-child(5){
    background-color: #1129475e;
}
.Col2 {
    @media (max-width: 900px){
        height: 365px;
        width: 65px;
    }
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 520px;
    width: 95px;

    margin-top: 145px;
}
.Col2 > div {
    height: 18%;

}
.Col2 :nth-child(1){
    background-color: #243a57b6;
}
.Col2 :nth-child(2){
    background-color: #4e73a1dc;
}
.Col2 :nth-child(3){
    background-color: #193455a8;
}
.Col2 :nth-child(4){
    background-color: #23354ba2;
}
.Col2 :nth-child(5){
    background-color: #5289cc5e;
}
.Col3 {
    @media (max-width: 900px){
        height: 365px;
        width: 65px;
    }
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 520px;
    width: 95px;
    margin-top: 0px;

}
.Col3 > div {
    height: 18%;

}
.Col3 :nth-child(1){
    background-color: #466792b6;
}
.Col3 :nth-child(2){
    background-color: #21354edc;
}
.Col3 :nth-child(3){
    background-color: #38495ea8;
}
.Col3 :nth-child(4){
    background-color: #4d6a8da2;
}
.Col3 :nth-child(5){
    background-color: #1129475e;
}

Not sure what to provide for the page not found. I’m using React, so technically it’s a 1 page application with react routing pulling in new code for the page to be shown.

1 Like

I solved my page not found issue by adding the _redirects file with the /* /index.html 200 content to it. Still facing the barely visible div issue however.

And I fixed the visiblity issue as well, I had my opacity value in my css set as 60%, changed it instead to 0.6 and it works as expected now.

1 Like

@joshbangle, first, welcome to our Netlify community site and, second, thank you for sharing the solutions you discovered with us.

For the single-page application (aka SPA) issue, I was going to recommend the redirect and was happy to see you found that solution. For the CSS I had no idea and so I for one also appreciate the update as to what the solution was there. (Some people just move on and never bother to update the question with how they fixed something.)

Thanks again and I hope you keep posting here. Hopefully future questions will be answered by someone other than yourself in the future also. :wink:

1 Like