Personal Portfolio: looks perfect in full page view but weird in editor view

Hey!

I’ve tried really hard to figure this out on my own but to no avail: in editor view the projects section infringes on the welcome section but in full page view it works just like it should. What could be afoot?

EDIT: Since posting this I’ve also applied a Google font and it is rendering except for certain letters have a weird extra white outline that is not part of the font. Any help with that also appreciated.

https://codepen.io/gabriellend/pen/oNBexNa

Many thanks for your help :pray:

Your welcome section has a height of 100vh and the projects section has a height of 300px. The editor view changes the size of the page.

Hey, thanks. So there is nothing I did wrong, it’s just how Codepen is? Shouldn’t it render properly no matter what the size of the viewport? It works normally in the example freecodecamp gives you. It makes it harder to edit because everything is on top of each other so I thought there would be something to remedy that.

Omg I think I figured it out. Kind of. I made the welcome section a flexbox and I think that took care of it. I don’t know why the other way didn’t work though. Thanks for your help!

You can move the editor to one side but then it looks narrow. It might seem better if the two sections were both 100vh. The problem with the font is it only comes in one weight, normal (400). Headings are in bold (700 or 800). The browser, Chrome, is adding style to it to compensate. I saw this in developer tools and confirmed it by changing the H1 to a paragraph. Normal weight looks like it does on Google Fonts. Bold makes it look like the H1.

1 Like

Oh wow, thank you for unraveling that mystery!