How to align README stats side by side in GitHub

Question

I dont know if this is the right place to ask this question but I am really stuck on this part. Basically, I am trying to align my github stats side by side in the readme file.

I added this code in my readme file:


![User GitHub Stats](https://github-readme-stats.vercel.app/api?username=user&show_icons=true&theme=radical)
![Top Languages Card](https://github-readme-stats.vercel.app/api/top-langs/?username=user&theme=radical&layout=compact)

How can I make it so that the two cards align side by side? Something like this:

Any suggestions?

UPDATE:

I tried adding this but it still did not work:

<img align="center" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
 <img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />


<div style="display: flex; flex-direction: row;">
 <img class="img" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
 <img class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />
</div>

Either `display: flex;` or `float` the elements. Please include your HTML and CSS if you want a relevant solution. — Kameron, Nov 23 '21 at 00:18
Here is a similar question: https://stackoverflow.com/questions/24319505/how-can-one-display-images-side-by-side-in-a-github-readme-md You might find out your answer there. — CleverUser123, Nov 23 '21 at 00:20
I'm almost certain all sorts of styling are filtered out here for reasons of sanitization, so there's probably not a way to do what you want. — bk2204, Nov 23 '21 at 02:19

Kameron · Answer 1 · 2021-11-23T00:53:56.503

1

Please see the CSS I added and changes to your HTML. Simply doing <img align="center" is not enough.

<div style="display: flex; flex-direction: row;">
 <img class="img" src="https://github-readme-stats.vercel.app/api?username=hussaino03&show_icons=true&theme=radical" />
 <img class="img" src="https://github-readme-stats.vercel.app/api/top-langs/?username=hussaino03&theme=radical&layout=compact" />
</div>

Inspected front-end and changed div styles to those suggested and it worked as expected. img

edited Nov 23 '21 at 00:53

answered Nov 23 '21 at 00:33

Kameron

7,250
3
6
22

how would I put the css into the readme file? – Nov 23 '21 at 00:36
You can use inline styles too. See the adjusted. – Kameron Nov 23 '21 at 00:36
hmm doesnt really work – Nov 23 '21 at 00:37
see the edited question with my output – Nov 23 '21 at 00:38
Make sure the new div is nested properly @user2345 add `flex-direction: row;` – Kameron Nov 23 '21 at 00:39
it works in preview for some reason but not in my actual page – Nov 23 '21 at 00:39
where do I add that? – Nov 23 '21 at 00:40
in replacement of `display: flex;`? – Nov 23 '21 at 00:40
@user2345 next to the current inline-styles. – Kameron Nov 23 '21 at 00:40
@user2345 check adjusted. – Kameron Nov 23 '21 at 00:40
nope doesnt work still – Nov 23 '21 at 00:41
@user2345 then you're going to have to post more of the surrounding code. Sounds like the div is not nested properly. – Kameron Nov 23 '21 at 00:42
what does class = "img" hold though? – Nov 23 '21 at 00:42
Im gonna post what I have in the question above. See the edited part – Nov 23 '21 at 00:43
@user2345 all you added was what I gave you... how does that help me? I need to see the pre-existing code around it. Do you have the link to the file? – Kameron Nov 23 '21 at 00:44
there is nothing around it though. That is all I have for the github stats – Nov 23 '21 at 00:45
@user2345 shoot me a link to the front-end please. – Kameron Nov 23 '21 at 00:46
do you want me to send u the link to my github? That way u can see what the error is? – Nov 23 '21 at 00:47
https://github.com/hussaino03/hussaino03 – Nov 23 '21 at 00:47
@user2345 check adjusted. – Kameron Nov 23 '21 at 00:54
take a look at the link, I think it will make more sense there – Nov 23 '21 at 00:55
@user2345 looked at link... edited answer shows that the suggested styles worked as expected. see img attached. I can't help anymore without more code or context. Cause the browser is rendering it properly on my end. – Kameron Nov 23 '21 at 00:57

How to align README stats side by side in GitHub

1 Answers1