Instagram - Layout For Laptop by kinsley

/* ==UserStyle==
@name         Instagram - Layout For Laptop
@version      20230419.12.50
@namespace    userstyles.world/user/kinsley
@description  I made this for my 14 inch laptop, better for browsing on small screens.
@author       kinsley
@license      No License
==/UserStyle== */
@-moz-document domain("instagram.com") {
  /* font size */
  :root {
    --comment-font-size: 18px;
    --system-14-font-size: 18px;
    --system-14-line-height: 1.2;
  }

  button {
    --comment-font-size: 14px;
    --system-14-font-size: 14px;
  }

  article ._aacl._aaco._aacu._aacx._aad7._aade {
    font-size: var(--comment-font-size);
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  article .x1f6kntn {
    font-size: var(--comment-font-size);
  }

  /* sidebar */
  ._aak6 {
    display: none;
  }

  /* navbar */
  ._aa4c {
    --nav-narrow-width: 0px;
    --nav-medium-width: 0px;
    --nav-wide-width: 0px;
  }

  .x1o5hw5a.x1o5hw5a {
    --nav-narrow-width: 72px;
    --nav-medium-width: 72px;
  }

  .xaeubzz.xaeubzz {
    --nav-wide-width: 72px;
  }

  .x1o5hw5a.x1o5hw5a:hover {
    --nav-medium-width: 244px;
  }

  .xaeubzz.xaeubzz:hover {
    --nav-wide-width: 335px;
  }

  ._aagx {
    width: 100%;
  }

  ._ab6-[aria-label="Instagram"] {
    width: min(103px, 100%);
  }

  /* read more button & view all comments button */
  article > div > div:nth-child(3) .x1roi4f4 {
    display: block !important;
    border: 1px solid #999;
    border-radius: 2px;
    text-align: center;
    padding: 8px;
  }

  article > div > div:nth-child(3) [role="button"] > .x1roi4f4 {
    margin-top: 12px !important;
  }

  article > div > div:nth-child(3) [role="link"] {
    width: 100%;
  }
  
  /* article */
  @media screen and (min-width: 800px) {
    .x17snn68.x17snn68 {
      width: 100%;
    }

    ._aam1 {
      min-width: 840px;
      max-width: 100%;
    }

    .xh8yej3 {
      max-width: 100% !important;
    }

    ._ab6k > div {
      flex-direction: row;
      flex-wrap: wrap;
    }

    ._ab6k + div > div > div {
      flex-direction: column;
    }

    ._ab6k > div > div {
      box-sizing: border-box;
    }

    ._ab6k > div > div:nth-child(1) {
      flex: 100%;
    }

    ._ab6k > div > div:nth-child(2) {
      flex: 60%;
    }

    ._ab6k > div > div:nth-child(3) {
      flex: 40%;
    }

    ._ab6k ._ae2s._ae3w._aggd {
      padding: 0 10px;
    }

    ._ac-g {
      white-space: nowrap;
    }
  }
}