When designing a responsive user interface, it is easier to start with the mobile version and, once you’re happy with it, add media queries to deal with bigger screens.
I use Chrome’s dev tools and its mobile emulation mode for this. It’s wonderful: You can see your page displayed as you would on the selected phone (Mostly. It’s not perfect.) and you have all the HTML and CSS on the side of the screen. You can edit the CSS and see what happens. It’s great for learning and fine-tuning.
I’ve tried to do that with CodePen and have been going increasingly frustrated. The Debug page would work fine in desktop mode but everything would be way too small in mobile mode. On the other hand, the Full Page View works fine with the mobile mode, but then you have to dig into CodePen’s HTML until you can actually see your own code, buried deep into an iframe. It gets old fast.
After some digging it turns out that Full Page works fine because CodePen’s <head> has the viewport meta set up, and Debug doesn’t work because CodePen doesn’t bother to set it up for you. It does set up the charset but not the viewport.
How do you solve this? Click on the little gear next to HTML and paste the following line into “Stuff for <head>”:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
That’s all. It works. No more digging into CodePen’s code. You can now fine-tune your mobile version in peace.