CodePen doesn't show responsive images in my column

1

I don’t like coding in CodePen so I used WebStorm IDE when I did my tribute page.

My problem comes when I view my page in mobile (via Chrome’s DevTools).

When I view my CodePen page from a simulated Nexus 5X, I don’t see the images in the well at the left column anymore. But when I view the version from my WebStorm IDE, the images are okay.

Viewed from CodePen:

in CodePen.png586×916 59.8 KB

Viewed from Chrome, coded using WebStorm

from WebStorm.png586×923 160 KB

Here’s the pen: https://codepen.io/naiza/pen/qNJKON?editors=1100
Any idea what’s going on?

2

This looks like a weird quirk that only affects Codepen and Chrome inspector…I haven’t come across it before, but I get the same problem as you running your pen.

I checked the iPhone 6 size in the dev tools, and it has the same problem, but on my real iPhone 6 the images show up fine. You can also check in the cross-browser testing Codepen link to: https://app.crossbrowsertesting.com/livetests/run?url=http%3A%2F%2Fcodepen.io%2Fnaiza%2Ffull%2FqNJKON

That test also shows that it’s fine, so I’d ignore this problem:

z5243713fbc92f57af71.png376×667 123 KB

3

Okay so it was CodePen, thought it was my code.

I’ve never heard of CrossBrowserTesting before. Looks useful, thanks!.