Codepen Not Working

Why does the “Hello” in codepen look different from the “Hello” in vscode? I copy and pasted the same exact html, css, and js.

Also, can someone help me make my portfolio website responsive. Right now it only looks good full screen, when it is shrunk to other sizes everything looks off. I have watched videos about @media{} and tried using it to fix my issues but I am still struggling to make the entire website responsive to any size

I dont know much about code pen,
However most browsers have default styles that could cause your webpage to look differently to how you would expect.

This video is quite old but explains a little about it:
(2) The problem with browser defaults and the future of resets! - YouTube

Time Stamp: 4:20

Where media queries are concerned, I REALLY struggled with these when learning.
It can take time for your brain to sort through everything your learning before you get the eureka moment.

I got through it by building really small things.
Once I could have the background colour change as I changed the width, I was able to add more from there, such as changing the text size, having a div display at the top for one width and on the side for anoth width.

Now I really enjoy using media queries :smiley:

If you make a prototype of your layout, you might find it easer to see the steps you need to take to make it work.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.