0

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). enter image description here This App.css file is present on the Netlify server: enter image description here

Improve this question
1
  • The CSS might probably not render because of the way it was nested in the CSS file. Could you try passing a class name into the div element, and declaring the CSS property for it? Commented Jan 7 at 19:10
Related questions
812
How to specify a port to run a create-react-app based project?
432
Template not provided using create-react-app
510
Conditionally applying class attributes in React
Load 6 more related questions Show fewer related questions

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.