README - Markdown Question

[JordanPicton]

Select Topic Area

Question

Body

When creating a README file, I'm wanting to have something that allows me to basically have two images combined together (one under the other) and when the screen resizes then Image A for example will always be above Image B.

I've tried doing this a few different ways and even though it shows that it works with a Markdown viewer, it does not when being displayed on GitHub.

Example:

What I'm doing:

  <div id="Python" style="display: flex; flex-direction: column; align-contents: center;">
    <a href="https://www.python.org">
      <img id="Python" width="87" alt="Python Logo" src="https://user-images.githubusercontent.com/25181517/183423507-c056a6f9-1ba8-4312-a350-19bcbc5a8697.png">
    </a>
    <img id="Python" width="100" src="https://progress-bar.dev/5">
  </div>
  <!-- NGINX -->
  <div id="NGINX" style="display: flex; flex-direction: column; align-contents: center;">
    <a href="https://www.nginx.com">
      <img id="NGINX" width="87" alt="NGINX Logo" src="https://user-images.githubusercontent.com/25181517/183345125-9a7cd2e6-6ad6-436f-8490-44c903bef84c.png">
    </a>
    <img id="NGINX" width="100" src="https://progress-bar.dev/1">
  </div>

I have nested this div insidea another as there's a bunch of these together and I wanted to center them all but I don't think this is working either.

Current Output:

Is it possible to do it the way I want to?

Thanks in advance,
~Jordan

[vickkie]

Hello @JordanPicton

-try to use grid instead of flexbox

or this directly in a markdown readme

| Website                            | Description |
| ----------------------- | ------------------ | ----------------------- | ------------------ |
| ----------------------- | ------------------ | ----------------------- | ------------------ |

to produce something like

[JordanPicton]

I'll have to give this a go too, thanks for the help. :D At least there's things I didn't know about yet.

[JordanPicton]

I've given this a go and it doesn't really seem to do what I want. I can't resize images and stuff inside of these, thanks for trying though. :)

[VegaCaroMiguel]

[JordanPicton]

I tried doing this with having HTML and then nested Markdown, though I'll give this method a go and see if I was just not responding in the brain department. :)

[mapluisch]

Hey Jordan,

have you tried wrapping your images into a good old HTML table? You could specify 2 rows and 4 cols and put the matching images into the respective cells.

So basically

<table>
    <tr>
        <td>1A</td>
        <td>2A</td>
        <td>3A</td>
        <td>4A</td>
    </tr>
    <tr>
        <td>1B</td>
        <td>2B</td>
        <td>3B</td>
        <td>4B</td>
    </tr>
</table>

and replace the placeholder vals with your <img> tags.

[JordanPicton]

I haven't actually, I'll give this a go. :D

[mapluisch]

Nice, please let me know if it works as intended :)

[JordanPicton]

This helped thanks!

[JordanPicton]

Nice, please let me know if it works as intended :)

This helped me fix the formatting I was trying to accomplish thank you a lot for helping me with this. :)