Github profile looks different if you're logged in

[louvenarde]

🏷️ Discussion Type

Bug

💬 Feature/Topic Area

Profile

Body

Hello friends,
I'm having trouble with the github profile page. It is my understanding that if you make a repository named exactly like your username (e.g. Louvenarde/Louvenarde) and add a markdown file in it, it will be used in your profile page.
This works, except the layout is completely different if I'm signed in or signed out, despite it being a public page.

This is how my profile page looks to me when I'm signed in

This is how my profile page looks to me when I'm signed out

I don't understand why this happens, can somebody give me some pointers on what I should do to fix it?
Is responsive layout a "signed-in user" privilege? 🤔

Kindly move the topic to a more appropriate subforum if required, I am new here so naturally I went to this forum first.

[github-actions[bot]]

💬 Your Product Feedback Has Been Submitted 🎉

Thank you for taking the time to share your insights with us! Your feedback is invaluable as we build a better GitHub experience for all our users.

Here's what you can expect moving forward ⏩

• Your input will be carefully reviewed and cataloged by members of our product teams. 
  • Due to the high volume of submissions, we may not always be able to provide individual responses.
  • Rest assured, your feedback will help chart our course for product improvements.
• Other users may engage with your post, sharing their own perspectives or experiences. 
• GitHub staff may reach out for further clarification or insight. 
  • We may 'Answer' your discussion if there is a current solution, workaround, or roadmap/changelog post related to the feedback.

Where to look to see what's shipping 👀

• Read the Changelog for real-time updates on the latest GitHub features, enhancements, and calls for feedback.
• Explore our Product Roadmap, which details upcoming major releases and initiatives.

What you can do in the meantime 💻

• Upvote and comment on other user feedback Discussions that resonate with you.
• Add more information at any point! Useful details include: use cases, relevant labels, desired outcomes, and any accompanying screenshots.

As a member of the GitHub community, your participation is essential. While we can't promise that every suggestion will be implemented, we want to emphasize that your feedback is instrumental in guiding our decisions and priorities.

Thank you once again for your contribution to making GitHub even better! We're grateful for your ongoing support and collaboration in shaping the future of our platform. ⭐

[nikvalani96]

👋 I'm experiencing the same issue on my GitHub profile. When I'm logged in, my social links are displayed in an inline (horizontal) layout. However, when I view the same public profile while logged out, the layout changes to a vertical list, which affects the overall appearance. 😕

Is this expected behavior, or is it a GitHub rendering issue? Has anyone found a fix or workaround? 🤔 Any suggestions would be greatly appreciated. 🙏

[schimanko]

Hey @louvenarde 👋

GitHub wraps the page in different layout shells, which triggers a CSS responsive breakpoint. A workaround would be to replace native pinned repos with an HTML table inside README.md, as such:

<table border="0">
  <tr>
    <td width="50%" valign="top">
      <h3><a href="https://github.com/yourname/repo-1">Parchment</a></h3>
      <p>An attempt at creating a lightweight solo wiki.</p>
    </td>
    <td width="50%" valign="top">
      <h3><a href="https://github.com/yourname/repo-2">xvy</a></h3>
      <p>Unity game running on Xbox 360 and PS3.</p>
    </td>
  </tr>
</table>

Give it a go and tell me if it worked?

[louvenarde]

I know a HTML table can be used as a workaround for a fixed layout, but some parts of my profile are also responsive and will not be satisfied by this workaround. Using a HTML table also alters the display from what it is intended to look like ☹️

After looking at the styles inspector for both situations I do not believe the flexible layout becoming a block display upon logout is how the website is intended to render.

GitHub wraps the page in different layout shells, which triggers a CSS responsive breakpoint.

I'm not sure what this means.

A more elaborate workaround could be to use an SVG object and embed CSS into it? Is that allowed? Should I be looking into that? 🤔

[louvenarde]

When you're logged out, GitHub adds extra top-navigation menus that squeeze the main page area, crossing a width threshold that forces your project cards to stack in one column instead of two.

Are you sure this is what is happening here? Comparing the two screenshots on mspaint it looks like the main section's width is identical, so the room available for content should be the same.

Is this not rather caused by the <img> tag having the display:block; property set when you're logged out, while it's inherited when you're logged in?

[schimanko]

Are you sure this is what is happening here? Comparing the two screenshots on mspaint it looks like the main section's width is identical, so the room available for content should be the same.

When you log out, GitHub swaps the page shell for a guest marketing layout, layer primer-brand if I remember correctly. In the code, the logged-in view uses a clean flexbox container to divide the row into a main content area and a sidebar:

<div class="tmp-mt-4">
  <div class="d-flex">

The logged-out view drops that wrapper hierarchy and injects dropdown navigation controls directly into the column flow:

<action-menu data-select-variant="single" ...>

It breaks the grid because Primer utility classes on your pinned project cards calculate 50% width relative to their immediate parent container, not screen width.

[schimanko]

@louvenarde, I created a PR with a proposed solution. Tell me if it worked. We can develop our findings there until we find a solution to post here, if you'd like.

[louvenarde]

Thanks, merged it.
Looks like the bug still persists but thanks for the attempt

[schimanko]

Thanks, merged it. Looks like the bug still persists but thanks for the attempt

Maybe trying using <img align="left" for all items, like <a href="..."> <img align="left" src= and <img align="left" src=" for the badges.

[AhmadJeddi]

Hi @louvenarde,

I’m experiencing a very similar issue with my GitHub Profile README.

When I’m logged in, my README renders correctly and the badges/images appear inline as expected. However, when viewing the same profile while logged out or in Incognito mode, the layout changes and shields.io badges are stacked vertically.

In my case, the issue affects not only profile links but also technology stack badges written directly in Markdown, for example:

![Python](https://img.shields.io/...)

I tested several workarounds, including HTML <img> tags, <div align="center">, different badge styles/sizes, and HTML tables. The table workaround keeps elements inline, but it introduces unwanted borders because GitHub applies its own table styling.

This seems like a difference between the authenticated and public Markdown/HTML rendering behavior, possibly related to CSS or responsive breakpoints.

I’m also trying to determine whether this is expected behavior or a GitHub rendering bug.

[schimanko]

There's a cool nuance, though: If a logged-out user navigates directly to a public application URL (like a public repository, pull request, or issue tracker), GitHub still renders the page using Primer App.

[louvenarde]

If I untick display:block here it fixes it for the whole page, not sure if that helps 🤔
This is what I was talking about when I mentioned an unfortunate CSS override with display:block, but you know github better than I do.

[schimanko]

If I untick `display:block` here it fixes it for the whole page, not sure if that helps 🤔 This is what I was talking about when I mentioned an unfortunate CSS override with `display:block`, but you know github better than I do.

Nice catch in DevTools! That img { display: block; } rule inside @layer primer-brand is the exact CSS reset loaded by GitHub's logged-out layout shell I was talking about.

Since we can't edit GitHub's global stylesheets, wrapping your image/badge links in <div style="display: flex; flex-wrap: wrap;"> inside your README.md should override that rule and keep everything lined up.

[louvenarde]

I did not know it was possible to override CSS locally in markdown on github 😮

I've tried what you suggested but it does not have any effect on a logged out page.
https://github.com/louvenarde/louvenarde/blob/main/README.md?plain=1

However on a logged-in page it seems to make the situation worse.

[schimanko]

I did not know it was possible to override CSS locally in markdown on github. I've tried what you suggested but it does not have any effect. https://github.com/louvenarde/louvenarde/blob/main/README.md?plain=1

Yup, I just saw it; I forked your README.md and created a PR with a proposed solution, as I stated here.