Align Items on WASM Getting Started Page

[Coder206]

Fixes #604

Before:

After:

Inspired by: #623

[Coder206]

I would like to see the text aligned as well but I haven't had any success with using the baseline attributes

[sondr3]

I think this SO answer might help: https://stackoverflow.com/a/39197187/273503. This is a bit of a limitation with Flexbox as far as I know, I think this would be fairly easy with CSS Grids (though I really have no idea).

[Coder206]

Many thanks @sondr3!

[ghost]

I think the images should become bigger again as well:

They are smaller than before.

[yoshuawuyts]

I think if we can increase the image-size slightly this should be good to merge!

[Coder206]

Thank you for your patience everyone! Let me know what you think :)

[yoshuawuyts]

@Coder206 Hmm, this is what it currently looks like on my machine:

New

Old

I feel this might not be what you were going for with this PR?

[Coder206]

Agreed, just to be clear, are we looking to have the images vertically aligned, the first line of the text and the buttons at the same time?

[yoshuawuyts]

Agreed, just to be clear, are we looking to have the images vertically aligned, the first line of the text and the buttons at the same time?

@Coder206 definitely the top of the images and the buttons. I'm less sure about the text -- so probably?

Aligning text might require resizing images, which might take some effort. But if it's possible, perhaps it's worth a shot?

[skade]

I think making sure that the images are all the same size is the way to go. @Coder206, is that a change you can do?

[Coder206]

@skade I want to make sure I understand, you want me to make the widths of the images the same?

[skade]

@Coder206 They should all fit the same box (same height and width), which might need some resizing of the images.

[skade]

Accidentally fixed by skeleton removal, #830 is a followup.

Thanks for the PR and the work, even if it didn't end up being merged.