Next.js Discord

Discord Forum

nextjs missing css

Unanswered
Masai Lion posted this in #help-forum
Open in Discord
Masai LionOP
Hello, I am working on a nextjs 14 project and I have a side by side view and when I tested the code locally using npm run dev, its working fine, the text is showing right and the media at left.
However, when I deployed the code to vercel production, there is something wrong with the way it is being rendered :-
The text seems to be stuck at start I don't know why, on inspecting I found out that its not able to have the css loaded for that particular text container.

6 Replies

Scottish Fold
where is the css? how are you importing the css in your project? have you check for some error in your browser console or network?
@Scottish Fold where is the css? how are you importing the css in your project? have you check for some error in your browser console or network?
Masai LionOP
I have a SideBySide.module.css and SideBySide.tsx files and imported the css in there. 
&.isTextRight {
    .contentWrapper,
    .touts {
      @media (min-width: 768px) {
        --text-content-start: calc(var(--grid-number-of-columns) / 2 + 4);
      }
    }

    .mediaContainer {
      @media (min-width: 768px) {
        order: -1;

        --media-start: start;
        --media-width: calc(var(--grid-number-of-columns) / 2 + 1);

      }
    }

    .contentWrapper,
    .touts {
      @media (min-width: 1050px) {
        --text-content-start: calc(var(--grid-number-of-columns) / 2 + 3);
      }
    }

    .mediaContainer {
      @media (min-width: 1050px) {
        order: -1;

        --media-start: start;
        --media-width: calc(var(--grid-number-of-columns) / 2);

      }
    }
  }



&.isTextLeft {

    /* Module Left */

    @media (min-width: 768px) {
      .contentWrapper,
      .touts {
        --text-content-start: col 1;
      }
    }

    @media (min-width: 768px) {
      .mediaContainer {
        --media-start: calc(var(--grid-number-of-columns) / 2 + 1);
        --media-width: calc(var(--grid-number-of-columns) / 2 + 1);
      }
    }


    @media (min-width: 1050px) {
      .contentWrapper,
      .touts {
        --text-content-start: col 2;
      }
    }

    @media (min-width: 1050px) {
      .mediaContainer {
        --media-start: calc(var(--grid-number-of-columns) / 2 + 2);
        --media-width: calc(var(--grid-number-of-columns) / 2);
      }
    }
  }
}
~
and this is the css that aligns the text right or left and the media accordingly
When running the app locally, everything seems to be working fine, but when I build the nextss for production, there seems to be something wrong
I checked the minified code from browser and there seems to be mission the contentWrapper code