There is an issue with the CSS not being applied after the project is built. Locally the CSS displays correctly, using npm run start
. Building and serving locally using npm run build
and npm serve build
or viewing on Netlify after deployment from Github displays the issues. Some CSS declarations are missing from matched elements, despite being present in the CSS class/ID rule, and present in the .css file itself.
I have checked in Firefox and Chrome. Both show the same issue. The CSS is on the server, is applying to most elements, and even the element where the issue is but one line here and there is just, not there.
This is from the App.css
on the Github repo. Line 67 is not being applied, yet the surrounding block is applied, even the display: flex
, line 66, is applied.
.form-input-group {
width: 100%;
.form-input-group-container {
width: 100%;
&>div {
66 display: flex;
67 flex-direction: column;
width: auto;
}
Here is a screenshot from the live server at Netlify on the "contact" page (no server side routing).
This App.css
file is present on the Netlify server: