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.