VS code Live server preview loads different from FCC IDE

1

1st Topic :wink:
I´m junior to all of this coding stuff, self taught, never gain a penny from IT…
I´m doing all the freecodecamp certifications and in the process i find it helpfull to use VS code in parallel with everything i´m typing in the site´s sandbox IDE.
I noticed that when i try to run the exact same code on VS´s Live server preview it loads severall css attributes messed up.
I´m still half way the 1st JS certification project, a palindrome checker, nobbie has i am, i´m switching between styles, scripts and index trying out stuff :yum:
Anyone around here knows why this happens?
My best guess is that i´m using different css versions on the 2 IDE´s.
Don´t have a clue on how to configure VS to act like freecodecamp´s IDE…

Clues?

Thanks in advance for all the help

2

check your file names, make sure they match…

for more help, please post more details, your code, whatever you think is needed

3

Hi,
I’m running into the same issue. Prob is, I’m a rookie like you and have no idea how to solve it. In particular, one margin displays different and also for some reason vs code isn’t sizing my elements how I specified in css.

4

Without seeing the code, it is hard to say much.

Can’t speak to the margin but as for sizing the fCC editor preview does have some parent elements with height on them that you won’t have by default. For example, any height you set using percentages will not work the same as it does in the editor.

5

I figured it out. I was able to fix my code so it appears the same in both VSS and freecodecamp. You likely have some of the same issues. This is what was causing it for me:

  1. Make sure all pixel values in your CSS file actually contain the letters “px” after them. In codecamp, it allows you to get away with not doing so and assumes most numbers without a suffix are pixel values. VSS doesn’t do this, you need to place px after each one.
  2. I had a link to a file on my comp in my html. My code was like this <img src="*location\filename*"> . But freecodecamp can’t access your files, so it subs in a “broken link element” with size properties of its own (maybe it’s the default for an img element, idk). VSS, however, can display your files. So it caused there to be alignment differences between the two.

Hope that helps!

1 Like