Difficult to style the card

[BGR360]

Hi lepture, I'm very new to web development and I am trying to include your style of github card on my website. I've been using a lot of the Flexible Box Model, but your card doesn't seem to be doing very well with centering vertically in my horizontal layout. Here is a screenshot:

Please let me know if you have any suggestions, I could be missing something obvious.

Here is the code I'm using.

[lepture]

The card is an iframe. You can wrap it with a div and style this div yourself.

[BGR360]

I have tried wrapping it in a div and it still snaps from the center to the top once the page finishes loading

[BGR360]

The iframe appears to be making itself much bigger than it needs to be. Here is a screenshot from Chrome (the card is on the very left being cut off by the screen):

As it is, the iframe has a size of 400 x 296 px, and as a result the surrounding div has a size of 400 x 300. However, looking at it, it shouldn't be anywhere near as tall as 300 px, it should be well less than 200px tall given its shape.

[isacikgoz]

It is not mobile friendly too, can you please fix the fixed width issue?

[maotora]

I'm also facing issues with mobile friendilyness of this app.

I came here to report it.

Quick screenshots of what happens when I switch from desktop view (shows great) to mobile view.

On Desktop / Tablet view.

On mobile view