Stories

Mobile style for Netlify CMS.

Mon, Jan 11, 2021, 1 minutes

A quick workaround on Netlify CMS Dashboard for mobile responsive.

Mobile style for Netlify CMS.

Place the below code after your closing </body>:

<style>
    @media (max-width: 799px) {
      .css-1gj57a0-SidebarContainer-card {
        position: static;
        width: 100%;
        margin-bottom: 30px;
      }
      .css-v758ki-AppMainContainer,
      .css-12b66la-AppHeaderContent {
        min-width: 0;
      }
      .css-104dqk8-AppHeaderButton-button-buttonActive-buttonActive-buttonActive-buttonActive-AppHeaderButton,
      .css-12yqrwa-AppHeaderNavLink-AppHeaderButton-button-buttonActive-buttonActive-buttonActive-buttonActive-AppHeaderButton {
        margin: 0;
        padding: 16px 7px;
      }
      .css-1f7nhiq-CollectionMain {
        padding-left: 0;
      }
      .css-1hvrgvd-CollectionTopContainer-card-cardTop {
        width: 100%;
      }
      .css-16b5p1f-ToolbarSectionMain-toolbarSection {
        flex-direction: column;
        justify-content: space-evenly;
      }
      .css-e9z4u8-AppHeaderSiteLink {
        display: none;
      }

      /* Media */
      .css-1f3mf5k-StyledModal {
        padding: 15px;
        grid-template-rows: 190px auto;
      }
      .css-svjxk-SearchContainer {
        display: block;
        width: 100%;
      }
      .css-smzvtl-LibraryTop {
        flex-direction: column;
      }
      .css-3ifd9s-ActionsContainer {
        text-align: center;
      }
      .css-1ih1y1j-LibraryTitle {
        margin-bottom: 15px;
      }
      .css-2ptjc9-UpperActionsContainer {
        display: inline-block;
      }
      .css-1qukh7n-DownloadButton-button-default-disabled-button {
        margin-left: 0;
        margin-right: 0;
      }
      .css-13rmovq-StyledUploadButton-button-default-disabled-button-gray {
        margin-left: 10px;
      }
      .css-1hpjyse-DeleteButton-button-default-disabled-button-lightRed {
        margin-top: 10px;
        margin-left: 0;
        margin-right: 0;
      }
      .css-1s67tkf-InsertButton-button-default-disabled-button-green {
        margin-top: 10px;
        margin-left: 10px;
      }
      .css-16796rj-LowerActionsContainer {
        display: inline-block;
        margin-top: 0;
      }
      .css-stmjdx-CardGridContainer {
        position: static;
        overflow: visible;
        width: 100%;
        padding-top: 20px;
      }
      /* End Media */

      /* Blog */
      .css-hn3jn7-EditorContainer {
        min-width: 0;
        padding-top: 100px;
      }
      .css-2oej7z-ToolbarContainer {
        height: 100px;
        width: 100%;
        min-width: 0;
      }
      .css-osnbqe-ToolbarToggle {
        flex-direction: column;
      }

      nav li {
        width: 35px;
        overflow: hidden;
      }
      /* End Blog */
    }
  </style>

Thanks for reading!

See you again in next article.

Si Nguyen

in git cer e-m
2020 © Singuyen