Split Profile Card Layout (PFP on Right ver.)

<!-- credit @tigerdropped if used <3 + you can share the layout link so more people can benefit of it. -->
<article class="mainbox">
  <h1>I'm a title!</h1>
  <div class="textbox">
    <p>You can type stuff here! just not too much, it will look bad after a certain amount of text. Except on mobile/tablets.</p>
  </div>
</article>
<article class="restofprofile">
  <!-- ALL YOUR NEW HTML HAS TO GO HERE SO IT APPEARS UNDER YOUR SPLIT PROFILE -->
  Lorem Ipsum and yapathon blah.
</article>

<style>

.placeholder {}

/* UPDATED 19/06/2026: Switched to the new site labels. Fixed user info placement. Adjusted comment descriptions to be less obtuse. */

/* BORDERS FOR GRID CELL VISIBILITY, REMOVE IF YOU NEED TO */
.pp-uc-avatar-container,
.profile-info-stack-inner,
.pp-uc-about-me + div,
.mainbox,
.restofprofile {
  border: 1px solid #f9f9f980;
  border-radius: 4px;
}

/* Global font. OVERRIDES EVERYTHING. Remove if you need to. */
:is(#root, #root ~ .chakra-portal) *,
:is(#root, #root ~ .chakra-portal) *::placeholder,
:is(#root, #root ~ .chakra-portal) *::before,
:is(#root, #root ~ .chakra-portal) *::after
{ font-family: 'DM Sans', sans-serif; }

/* Background of page */
#root > * { background: #111 !important; }

/* Setup */
.pp-uc-about-me, .profile-info-hstack { display: contents; }

/* Main container of profile card */
.profile-page-flex {
    flex-direction: column !important;
}
/* Profile card box */
.pp-uc-background {
  padding: 0;
  width: 100%;
  max-width: 1000px; /* needed so ultra wide screens don't look like trash. You can adjust, but can make your side text look bad. */
  margin: auto; /* centers automatically */
  background: #0000;
}

/* Transparency */
.pp-uc-background > div:empty { background: #0000 !important; }
/* Yet another profile card box */
.pp-uc-background > div:not(:empty) {
  display: flex; justify-content: center;
}

/* Main grid for split layout */
.profile-info-stack {
  gap: 0.5rem;
  justify-items: center;
  align-items: start;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* will create two equally sized columns */
  grid-template-rows: auto 1fr auto;
  grid-auto-rows: auto; /* will adapt newly created rows automatically */
}

/* pfp */
.pp-uc-avatar-container {
  order: 0; /* will always take the remaining cells, starting top right; */
  grid-area: 1 / -1 / 4 / -2; /* will take the right grid cells, expanding nearly to the bottom */
  overflow: hidden;
  /* Style */
}

.pp-uc-avatar-container img {
  object-fit: cover;
  border-radius: 0;
  box-shadow: unset;
  width: 100%;
  height: 100%;
}

/* profile info */
.profile-info-stack-inner {
  color: #f9f9f9;
  width: 100%;
  gap: 0;
  grid-column: 1;
  order: -3; /* will take the first grid cell, top left */
  overflow: unset;
}

/* your bio container to have on the right */
.mainbox {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column;
  grid-column: 1;
  order: -2; /* will be under the user info in your desktop grid */
}

.mainbox .textbox {
  flex-grow: 1; /* takes full height always */
}

/* follow / options button container */
.pp-uc-about-me + div {
  order: -1; /* will be under your custom text box */
  grid-column: 1;
}
/* Fix */
.pp-uc-about-me + div > div { margin-top: 0; }
.profile-uc-follow-flex { display: contents; }
.profile-info-stack-inner-flex { margin: unset; overflow: unset; }

/* Box for your new html */
.restofprofile {
  order: 10;
  grid-column: 1 / -1;
  height: 100%;
  width: 100%;
}

/* Under 800px, change the grid */
@media only screen and (max-width: 799px) {
  .profile-info-stack {
    grid-template-columns: 100%; /* only one column */
  }
  .pp-uc-avatar-container {
    grid-column: 1 / -1;
  }
}

</style>