Hi all, I recently migrated a copy of a Codepen (portfolio project) to my localhost server (and hosting provider server). Why does the font-size look bigger on the Codepen (debug mode) than on the hosting servers? The code is identical but the font renders larger in Codepen on the same browser, same platform, same viewport.
I would inspect the element in question using the browser’s dev tools and see what css rules are different. Once you know what rules are missing or are different you can see where the discrepancy came from.
Code pen takes some liberties, including linking different assets, to make it easy for anyone to just dive and start coding.
Hey all, thanks for getting back to me. Yes, before I posted my topic I had checked the code via the Dev tools and also comparing the HTML and CSS source code side by side of each URL rendering. Unless I missed something each were identical.
I’m thinking Aaronms may be right concerning Codepen linking different assets and possibly some default font-size rendering for the body element or something of that kind. On the other hand the font-family is correct and they claim Debug mode is the authors pure code. I want to believe them as I really like Chris Coyier and his peers and have confidence in their stuff. I can’t figure it. Probably something on my end.
rogerhatfield.net/fcc-personal-portfolio
codepen.io/sonofadoc/full/JJxYQm
Thanks
On your server, you have h2 and h5 both set to a font weight of 400. In codepen, the h2 is set to a weight of 700, and h5 is set to a weight of 300.
Oh my. I should have caught that. Good eye Candice. Thank you! Really like your website. Nice!